Now, let's add your custom branding inside your Angular app. You will need the svg icon you used to create your favicon:
- Place the image under src/app/assets/img/icons, named lemon.svg
- Import HttpClientModule to AppComponent so that the .svg file can be requested over HTTP
- 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') ) }}
- Add the icon to the toolbar:
src/app/app.component.ts template: ` <mat-toolbar color="primary"> <mat-icon ...