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: 
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);
    }
  }
}

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

```