Change arrow style for default expansion panel arr

Question

I have an angular expansion panel as shown below.

But I want to change the the design of the arrow to something like this:

Not expanded:

Expanded:

How? or is it possible for me to do so in angular material? Code below:

HTML:

<md-expansion-panel>
  <md-expansion-panel-header>
    <md-panel-title>
      Personal data
    </md-panel-title>
    <md-panel-description>
      Type your name and age
    </md-panel-description>
  </md-expansion-panel-header>

  <md-form-field>
    <input mdInput placeholder="First name">
  </md-form-field>

  <md-form-field>
    <input mdInput placeholder="Age">
  </md-form-field>
</md-expansion-panel>

TS:

import {Component} from '@angular/core';

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}

Answer 1

Yes it is possible. Give your expansion panel a reference id e.g. example and set the hideToggle property as true.

In the <md-panel-description>, you can place your icons and use the expanded property of the panel to show or hide the relevant icons.

  <md-expansion-panel  class="custom-header" hideToggle="true" #example>
    <md-expansion-panel-header>
      <md-panel-title>
        Personal data
      </md-panel-title>
      <md-panel-description>
        Type your name and age
        <md-icon *ngIf="!example.expanded">play_arrow</md-icon>
        <md-icon *ngIf="example.expanded">arrow_drop_down</md-icon>
      </md-panel-description>
    </md-expansion-panel-header>

    <md-form-field>
      <input mdInput placeholder="First name">
    </md-form-field>

    <md-form-field>
      <input mdInput placeholder="Age">
    </md-form-field>
  </md-expansion-panel>

To provide space between the icon and panel description, add the following classes in your component.css:

.custom-header .mat-expansion-panel-header-title, 
.custom-header .mat-expansion-panel-header-description {
  flex-basis: 0;
}

.custom-header .mat-expansion-panel-header-description {
  justify-content: space-between;
  align-items: center;
}

I have used material icons. You can place your custom icons if you want. Here is a link to stackblitz demo.