Cambiar el estilo de flecha para la flecha del panel de expansión predeterminada

Solución:

Sí, es posible. Dale a tu panel de expansión una identificación de referencia, por ejemplo example y establecer el hideToggle propiedad como true.

En el <md-panel-description>, puede colocar sus iconos y utilizar el expanded propiedad del panel para mostrar u ocultar los iconos relevantes.

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

Para proporcionar espacio entre el icono y la descripción del panel, agregue las siguientes clases en su 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;
}

He usado íconos de materiales. Puede colocar sus iconos personalizados si lo desea. Aquí hay un enlace a demo de stackblitz.

extendió la respuesta de @Faisal y según la última versión de material angular, usaremos mat prefijo en lugar de md para los componentes de Material.

Material angular 8.1.4

<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>
<mat-expansion-panel-header>
  <mat-panel-title class="font-weight-bold font-small">
    Info
  </mat-panel-title>
  <mat-panel-description>
    <mat-icon *ngIf="!xyz.expanded">play_arrow</mat-icon>
    <mat-icon *ngIf="xyz.expanded">arrow_drop_down</mat-icon>
  </mat-panel-description>
</mat-expansion-panel-header>
<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>

Demostración de Stackblitz

---

---

Utiliza Nuestro Buscador