Material Iconに好きなフォントアイコンを追加する

Material Iconにビッタリくるようなものがないならカスタムアイコンを追加しよう。
どこかのライブラリにいかしたものがあるならそれでいいし、自分で作ったものでもよい。

追加したいフォントファイルをどこかに置く

例えばこれを追加することにします。
https://materialdesignicons.com/

npm installしたらsvgファイルとかttfファイルとか手に入ります。npmインストールするんならnode_modules指定でいいと思うんだけど、容量削減のために加工入れるならassetフォルダに置けばいいし、CDNから引っ張りつつservice workerのキャッシュに載せるならngsw-config.jsonのurlsに記載すればよい。

Angularの中で追加する

MatIconRegistryで追加登録できます。個人的にはMaterialインポート用のmodule作ってるのでそこのコンストラクタで登録します。そうじゃなかったら、AppModuleでインポートされてるapp-wideなところで登録しましょう（そうじゃないとhtmlの場所によっては使えなくなるから）。URLはsanitizerしないと怒られます。

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconSet(sanitizer.bypassSecurityTrustResourceUrl('../node_modules/@mdi/font/materialdesignicons-webfont.svg'));
  }

そしたらもう公式と同じように追加したアイコンも名前指定すれば表示できます。

<mat-icon svgIcon="boku-ga-tukkutta-icon"></mat-icon>

やっぱ名前空間とか分けようよ、将来的に同じ名前が公式で追加されたらぶつかっちゃうしとかなら、こう。

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconSetInNamespace('custom', sanitizer.bypassSecurityTrustResourceUrl('../node_modules/@mdi/font/materialdesignicons-webfont.svg'));
  }

そしたら以下で表示できます。custom:によって公式アイコンと名前が被らないようになります。

<mat-icon svgIcon="custom:boku-ga-tukkutta-icon"></mat-icon>

他のやり方

単発アイコンを登録したかったり、svg以外ならどうするのというなら、こちらを参照してください。サンプルコードがなくてわかりづらいけど、typescriptの型定義やテストファイル見てがんばりましょう。