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).
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>

```