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: 
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**
You can use `mat-icon` in the `mat-expansion-panel-header`.

Please check [this](https://stackblitz.com/edit/angular-fnvhnn?file=app/expansion-overview-example.html) working example on stackblitz.

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

```js
<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>

```