Material Symbols
昔は Material Icons と呼ばれていたやつ
Angular Material を ng add したときに導入されるアイコンセットはv15時点ではまだ Material Icons なので、↑のURLで探したアイコンを使おうと思っても見た目が違う。
Angular Material で Material Symbols のアイコンを使う方法
<mat-icon> にデフォルトで付与されるクラス名を IconRegistry サービス経由で書き換えることで使えるようになる。こんな感じで APP_INITIALIZER に渡した関数で MatIconRegistry.setDefaultFontSetClass を呼び出すといい。 material-symbols-outlined はMaterial Symbolsのアウトラインスタイルのアイコンを使うためのクラスである。
code:ts
{
provide: APP_INITIALIZER,
multi: true,
useFactory: () => {
const iconRegistry = inject(MatIconRegistry);
return () => {
iconRegistry.setDefaultFontSetClass('material-symbols-outlined');
};
},
},
これで、テンプレートでは <mat-icon>home</mat-icon> のように書けばアイコンが表示される。