Angular Materialの<mat-icon>で複数のアイコンを表示させたい。

Angularのmat-iconの使用方法については以下の記事で非常に詳しく解説されています。

Angular Materialで<mat-iconを使う

この記事ではアイコンを複数使用する場合について紹介します。

該当のソースコード。

app.component.ts

private icons = {
    'home': 'assets/icons/home.svg',
  }

constructor(
    private domSanitizer: DomSanitizer,
    private matIconRegistry: MatIconRegistry,
  ) {

    Object.entries(this.icons).forEach( ([name, file]) => {

      this.addIcons(name, file);
    });
  }


  /**
   * icon と そのパスを登録する
   */
  private addIcons(name, file) {
    this.matIconRegistry.addSvgIcon(
      name,
      this.domSanitizer.bypassSecurityTrustResourceUrl(file),
    );
  }

iconsの中に登録するアイコン名と保存されているパスを対応させて登録しています。

あとはここに随時追加していくだけで使用できます。