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

Question

The default icon for toggling a mat-expansion-panel is >. Setting hideToggle true just hides the toggle icon. Is there any way to change it? I found nothing in the official documentation. I want to use + or - icon if the state is closed or opened respectively.

score 20 · Accepted Answer · edited Aug 05 '22 at 10:17

20

As stated on the Angular Material Expansion Panel documentation, we can customise the stylings of the mat-extension-panel-header, which will in turn allow you to customise the icons.

First and foremost, you hide the original icon by setting the hideToggle attribute to true. In addition, we assign the event bindings (opened) and (closed) to the panelOpenState property. You may check out the other properties of mat-expansion-panel over here.

<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"hideToggle="true">

Next, on your mat-panel-description, you include the custom icons required. The icons shown will be dependent on the state of the panel. For this example, we are using the icons from Material Icons.

<mat-panel-description>
  <mat-icon *ngIf="!panelOpenState">add</mat-icon>
  <mat-icon *ngIf="panelOpenState">remove</mat-icon>
</mat-panel-description>

I have edited the original sample from the Angular documentation, such that it is using the custom + and minus icons to denote the expanded/collapsed state of the mat-extension-panel. You may access the demo over here.

edited Aug 05 '22 at 10:17

Naza

3
2

answered Jun 16 '19 at 13:39

wentjun

40,384
10
95
107

3

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. But I think its a very tidious idea. There must be a better generic way than hard-coded solution. – Samiul Alam Jun 17 '19 at 07:23
Hmm.. I see..Yeahh you got a point!! I didn't think of it when I came up with that solution! – wentjun Jun 18 '19 at 13:27
2

In addition to the limitation described by @samiul-alam, I find another problem with this approach: it does not work for `togglePosition="before"` – Reuben Sivan Dec 17 '20 at 23:30
4

Another tweak is that you don't need the `panelOpenState` property if you use a template reference: `` with `addremove`. By defining `panel` as a template reference, you can access the `expanded` state of the mat-expansion-panel directly, removing the need for a variable in the component. – user3221325 Feb 25 '21 at 18:31
This worked like a charm! Great comments as well!!! I did not use the template variable but just used one arrow icon and did a `transform: rotate(...deg);` to get it to be the direction I needed it to be depending on if the dropdown is expanded or not. I used the `.expanded` class on the `mat-expansion-panel-header` to determine when to apply rotate. – Alan Richards Apr 08 '22 at 20:59

v-andrew · Answer 2 · 2022-10-03T13:13:44.743

There is a class .mat-expanded which is applied to a <mat-expansion-panel>

So you can just use CSS to change the icon, no JS required.

To change arrow down to up:

.mat-expanded .mat-expansion-panel-header-title .material-icons{
  transform: rotate(180deg);
}

    <mat-panel-title>
      <span class="material-icons">expand_more</span>
      Panel with icon `transform`
    </mat-panel-title>

To swap icons:

.mat-expansion-panel-header-title .open,
.mat-expanded .mat-expansion-panel-header-title .close{
  display: inline-block;
}
.mat-expanded .mat-expansion-panel-header-title .open,
.mat-expansion-panel-header-title .close{
  display: none;
}

    <mat-panel-title>
      <span class="material-icons open">open_in_full</span>
      <span class="material-icons close">close_fullscreen</span>
      Panel with open/close
    </mat-panel-title>

Here is a link to a demo https://stackblitz.com/edit/angular-e2fnlm

CSS solution works with multiple Material Expansion Panels

score 5 · Answer 3 · answered Jul 20 '20 at 18:44

Give the name to the mat-expansion-panel say panel in the example. Use expanded property of the mat-expansion-panel to show or hide the + or - icon.

 <mat-expansion-panel #panel  hideToggle>
        <mat-expansion-panel-header>
             <mat-panel-title>
                        Buttons
             </mat-panel-title>
             <mat-icon >{{panel.expanded? 'remove' : 'add'}}</mat-icon>
                        
        </mat-expansion-panel-header>
                   
  </mat-expansion-panel>

score 2 · Answer 4 · answered May 08 '20 at 17:47

For those interested, here is an example that works with multiple Expansion Panels:

View:

<mat-accordion>
  <mat-expansion-panel *ngFor="let panel of panels; let i = index"
      (opened)="panelOpenState[i] = true" (closed)="panelOpenState[i] = false"
      hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{panel.title}}
      </mat-panel-title>
      <span *ngIf="!panelOpenState[i]">Show</span>
      <span *ngIf="panelOpenState[i]">Hide</span>
    </mat-expansion-panel-header>

    Panel Content
  </mat-expansion-panel>
</mat-accordion>

Component:

export class PanelComponent implements OnInit {
  panels: [];
  panelOpenState: boolean[] = [];

  ngOnInit() {
    // loop to add panels
    for (let i = 0; i < 5; i++) {
      this.panels.push({ title: i });
      this.panelOpenState.push(false);
    }
  }
}

Stefan Jovanchevski · Answer 5 · 2019-06-16T13:50:48.720

1

You can use mat-icon in the mat-expansion-panel-header.

Please check this working example on stackblitz.

For a + icon you can use <mat-icon>add</mat-icon>

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-icon>add</mat-icon>
  </mat-expansion-panel-header>

  <mat-form-field>
      <input matInput placeholder="First name">
  </mat-form-field>

  <mat-form-field>
     <input matInput placeholder="Age">
  </mat-form-field>
</mat-expansion-panel>

edited Jun 16 '19 at 13:50

answered Jun 16 '19 at 13:39

Stefan Jovanchevski

357
1
9

HI, thanks for sharing code, it is working fine when we use single accordion, but if we have multiple expansion panel, then it does not work properly.it does not open and close properly.it will be great help if you can suggest me some hacks or where is mistake i just copy and pasted your code – Code lover May 11 '22 at 09:22

score -2 · Answer 6 · answered Aug 25 '20 at 10:43

-2

add hideToggle to mat-expansion-panel :

<mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false" hideToggle>

and add icon:

 <mat-expansion-panel-header>
            <mat-icon>add</mat-icon>

answered Aug 25 '20 at 10:43

aris

409
6
8

This seems like an incomplete thought and just a copy of the other answers. – Alan Richards Apr 06 '22 at 18:05

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

6 Answers6

Linked