Angular Materialの<mat-icon>で複数のアイコンを表示させたい。
988 ワード
Angularの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の中に登録するアイコン名と保存されているパスを対応させて登録しています。
あとはここに随時追加していくだけで使用できます。
Author And Source
この問題について(Angular Materialの<mat-icon>で複数のアイコンを表示させたい。), 我々は、より多くの情報をここで見つけました https://qiita.com/kenya-112163/items/c9fb4034a098a24bcb1f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .