htmlcssangularsassangular-material

Moving mat-icon to left of expansion panel header title?

I've changed the Angular Material documentation expansion panel accordion demo slightly in order to move the account circle icon to the left of the title like this:

    <mat-expansion-panel-header>
      <mat-icon>account_circle</mat-icon>
      <mat-panel-title> Personal data </mat-panel-title>
    </mat-expansion-panel-header>

However it still appears on the right side.

How do we move the icon to the left of the title, while keeping the CSS within the declaring component?

Solution

  • Change the order of the icon and the title using order.

    mat-panel-title {
  order: 1;
}

mat-icon {
  order: 0;
  margin-right: 1rem;
}