How to position the Angular Material expansion panel arrow icon on the left-hand side

Question

I have upgraded Angular Material to 4.0 in my app. I am using the <mat-expansion-panel> as per requirement. The expansion arrow has to be on the left-hand side of the panel, but by default it's displaying on the right-hand side. I have checked for the align option, but I didn't get what I need.

<mat-expansion-panel expanded='true'>
   <mat-expansion-panel-header [ngClass]="tickets-container-header">
      <mat-panel-title>
         <div class="col-md-9">
         {{header}} 
         </div>
      </mat-panel-title>

   </mat-expansion-panel-header>
</mat-expansion-panel>

Answer 1

As of Angular Material 8.1.x, you can use the @Input() togglePosition-decorator.

The documentation states the following

@Input() togglePosition: MatAccordionTogglePosition | The position of the expansion indicator.

Add it to the accordion like this: <mat-accordion [togglePosition]="'before'">

Here is a Stackblitz with an example