【Angular Material】Expansion Panelで表示されるアイコンを変更したい

はじめに

Angular Materialで提供されている「Expansion Panel」のアイコン（画像でいうと赤枠の部分）を変更するやり方を共有していく。

まずはドキュメント通りのコード

panel-example.component.html

<mat-accordion>
    <mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>美食殿</mat-panel-title>
        </mat-expansion-panel-header>
        <ng-container *ngFor="let charaName of bisyokuden">
            <p>{{charaName}}</p>
        </ng-container>
    </mat-expansion-panel>
</mat-accordion>

ここから修正していく。

既存のアイコンを非表示にする

「hideToggle」というオプションがあるのでこれをtrueに設定

panel-example.component.html

<mat-accordion>
    <mat-expansion-panel [hideToggle]="true">
        <mat-expansion-panel-header>
            <mat-panel-title>美食殿</mat-panel-title>
        </mat-expansion-panel-header>
        <ng-container *ngFor="let charaName of bisyokuden">
            <p>{{charaName}}</p>
        </ng-container>
    </mat-expansion-panel>
</mat-accordion>

これでまずはアイコンが消える

mat-expansion-panel-header内にアイコンを設定する

panel-example.component.html

<mat-accordion>
    <mat-expansion-panel [hideToggle]="true">
        <mat-expansion-panel-header>
            <mat-panel-title>美食殿</mat-panel-title>
            <mat-icon>add_circle_outline</mat-icon>
        </mat-expansion-panel-header>
        <ng-container *ngFor="let charaName of bisyokuden">
            <p>{{charaName}}</p>
        </ng-container>
    </mat-expansion-panel>
</mat-accordion>

これで好きなアイコンに変更できた。

ちなみに参考リンク先ではmat-panel-descriptionを使ってやっているが、これをすると右端によらないため、そのままmat-iconを指定してやれば良い。

余談

しかしこのままではopen, closeでアイコンが変わらない。
参考リンク先ではそのやり方を紹介してくれているが、複数のExpansion Panelを表示した場合に全てのアイコンが変わってしまう。

The solution works fine for one mat-expansion-panel. What to do if I have multiple expansion panels? The panelOpenState is a variable that will be shared by every expansion panels. One panel expands, all the icon changes from + to zero because every expansion panels share the same variable panelOpenState.

質問者も同じことを言っている。続けて、

I thought one solution: to give every panel a hardcoded id (like panel1, panel2, etc.) and using opened and closed event I can change the value in the tag.

公式ドキュメントでもやり方は書いてないのでどうやらこの人のいう通り全てのPanelに固有のIDを振り、opened closedイベントでmat-iconを変更してやるしか方法は無さそうだ。
いずれその（自分なりの）やり方も記事にする予定。

参考

• How to change toggle icon of mat-expansion-panel?