【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'이 클릭될 때마다 벌레 아이콘이 늘어나게 했다.
이제 실제로 버튼을 눌러 본다.


아, 문자만 추가되어 아이콘이 표시되지 않는다.

클래스 추가도 필요

mat-icon 를 추가하는 것만으로는 안되고 클래스도 추가할 필요가 있다.
추가하는 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?