【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?