Angular 6 for Enterprise-Ready Web Applications

Custom icons

Now, let's add your custom branding inside your Angular app. You will need the svg icon you used to create your favicon:

1. Place the image under src/app/assets/img/icons, named lemon.svg
2. Import HttpClientModule to AppComponent so that the .svg file can be requested over HTTP

3. Update AppComponent to register the new svg file as an icon:

src/app/app.component.tsimport { DomSanitizer } from '@angular/platform-browser'...export class AppComponent {  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {    iconRegistry.addSvgIcon(      'lemon',      sanitizer.bypassSecurityTrustResourceUrl('assets/img/icons/lemon.svg')    )  }}

4. Add the icon to the toolbar:

src/app/app.component.ts  template: `    <mat-toolbar color="primary"> <mat-icon ...