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.

Answer: 
As stated on the Angular Material Expansion Panel [documentation](https://material.angular.io/components/expansion/api#MatExpansionPanelHeader), 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](https://material.angular.io/components/expansion/api#MatExpansionPanel).

```
<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](https://material.angular.io/components/icon/overview).

```
<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](https://stackblitz.com/edit/angular-j2te3m?file=app/expansion-overview-example.html).
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:

```css
.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:

```css
.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](https://stackblitz.com/edit/angular-e2fnlm?file=src%2Fapp%2Fexpansion-overview-example.html)

CSS solution works with **multiple Material Expansion Panels**