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

first you need to import angular material icon and expansion panel module in app.module.ts file,

import {MatExpansionModule,MatIconModule} from '@angular/material';
...
@NgModule({
  ...
  imports: [
    MatExpansionModule,
    MatIconModule 
  ]
  ...
})
export class AppModule { }

Add this code in your HTML file,

    <mat-expansion-panel expanded='true' hideToggle="true" (click)="click()">
      <mat-expansion-panel-header [ngClass]="tickets-container-header">
        <mat-panel-title>
            <mat-icon>{{icon  ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</mat-icon>
            <div  class="col-md-9">
            {{header}} 
            </div>
        </mat-panel-title>

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

Add this code in your component file,

icon: boolean = false;

click(){
    this.icon = !this.icon;
  }

Thanks,

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

Worked for me just using css:

.mat-expansion-indicator {
    position: absolute;
    left: 15px;
  }