Icons and Assets

SVC Icons

Great Article on building and Angular Material Icon Component with local SVG Images

Dedicated IconModule in shared/modules (import in app.module.ts)

@NgModule({
  exports: [], providers: [], declarations: [],
  imports: [MaterialModule],
})
export class IconModule {
  private path = '../../../assets';

  constructor(
    private domSanitizer: DomSanitizer,
    public matIconRegistry: MatIconRegistry
  ) {
    this.trustIcon('place', `${this.path}/backpack.svg`);
    this.trustIcon('dish', `${this.path}/chilis.svg`);
    // ...
  }

  private trustIcon(iconName: string, resourceUrl: string): void {
    this.matIconRegistry.addSvgIcon(
      iconName, this.domSanitizer.bypassSecurityTrustResourceUrl(resourceUrl)
    );
  }
}

Use in HTML Template

  <mat-card-title>
    <mat-icon svgIcon="place"></mat-icon>
    Add a lovely new Place
  </mat-card-title>

Styletip for mat icon with text

.mat-icon {
  vertical-align: middle;
}

source

Also use inline=true do ensure the size is scaled

    <mat-icon [title]="getLocationType(row)?.label" inline="true">
            {{getLocationType(row)?.icon}}
    </mat-icon>

SVG Icons

Great Source for free icons: iconfinder

Trim SVG Icons

Open with Inkscape
Datei → Dokumenteinstellungen → Seitengröße auf Zeichnung/Auswahlgröße