【Angular Material】`mat-icon`を動的に表示したい

はじめに

今回はAngular Materialの「MatIcon」を動的に表示する方法を共有する。

今回使用するソースコード

icon-example.component.html

<h2>アイコン増殖バグ</h2>

<button mat-flat-button (click)="addIcon()" color="accent">Add Button</button>

<div class="icon-area">
    <mat-icon>bug_report</mat-icon>
</div>

icon-example.component.ts

import { Component, ElementRef, Renderer2 } from '@angular/core';

@Component({
    selector: 'app-icon-example',
    templateUrl: './icon-example.component.html',
    styleUrls: ['./icon-example.component.scss'],
})
export class IconExampleComponent {
    constructor(private renderer: Renderer2, private elRef: ElementRef) {}

    /**
     * アイコンを追加する
     */
    public addIcon() {
        const addIcon = this.createIcon('bug_report');

        const iconDiv = this.elRef.nativeElement.querySelector('.icon-area');
        this.renderer.appendChild(iconDiv, addIcon);
    }

    /**
     * アイコンを作成する
     * @param iconName
     */
    private createIcon(iconName: string) {
        const icon = this.renderer.createElement('mat-icon');
        const text = this.renderer.createText(iconName);
        this.renderer.appendChild(icon, text);
        return icon;
    }
}

「Add Button」がクリックされるたびに虫のアイコンが増えるようにした。
これで実際にボタンを押してみる。

ありゃ、文字だけ追加されてアイコンが表示されない。

Classの追加も必要

mat-iconを追加するだけではダメで、Classも追加する必要がある。
追加するClassはmat-icon, material-iconsだ。

icon-example.component.ts

    /**
     * アイコンを作成する
     * @param iconName
     */
    private createIcon(iconName: string) {
        const icon = this.renderer.createElement('mat-icon');
        const text = this.renderer.createText(iconName);
        this.renderer.appendChild(icon, text);
        this.renderer.addClass(icon, 'mat-icon'); // ←追加
        this.renderer.addClass(icon, 'material-icons'); // ←追加
        return icon;
    }

実際に動かしてみる。

正常にアイコンが追加されるようになった。

まとめ

• MatIconを動的に追加する場合は、Classも一緒につけよう。
• つけるClassは、mat-icon, material-icons

参考

• How to dynamically add mat-icon to divs with angular renderer2?