[Angular][Material] 動的にMatIconを生成する

動的にMatIconを生成する方法

icon.html

<button (click)="addMatIcon()">アイコン追加</button>
<div #iconAreaElement></div>

icon.component.ts

~~略~~

@ViewChild('iconAreaElement') iconAreaElement?: ElementRef;

~~略~~

addMatIcon() {
  const iconElement: HTMLElement = document.createElement('mat-icon');
  iconElement.innerHTML = 'home';
  iconElement.classList.add('mat-icon', 'material-icons')
  this.iconAreaElement?.nativeElement.appendChild(iconElement);
}

• アイコンの種類はinnerHTMLで設定する
• mat-iconとしてAngularが正しく生成するには、mat-iconとmaterial-iconsというクラスも付与する必要がある
  

view初期化時に動的に生成したい場合

もし、ボタンではなくviewを生成した後に動的に生成する場合は、ngAfterViewInit()の中に記述すればOK

icon.component.ts

ngAfterViewInit() {
  const iconElement: HTMLElement = document.createElement('mat-icon');
  iconElement.innerHTML = 'home';
  iconElement.classList.add('mat-icon', 'material-icons')
  this.iconAreaElement?.nativeElement.appendChild(iconElement);
}　

参考

https://qiita.com/masaks/items/331cc8ccf41c362971ed