Stepper: Do not change the icon

Question

I am using the Stepper component.

<mat-stepper orientation="vertical">
  <mat-step state="home">
    <ng-template matStepLabel>Step 1</ng-template>
    <ng-template matStepContent>
      <p>This content was rendered lazily</p>
      <button mat-button matStepperNext>Next</button>
    </ng-template>
  </mat-step>
  <mat-step state="form">
    <ng-template matStepLabel>Step 2</ng-template>
    <ng-template matStepContent>
      <p>This content was also rendered lazily</p>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </ng-template>
  </mat-step>
  <mat-step state="last">
    <ng-template matStepLabel>Step 3</ng-template>
    <p>This content was rendered eagerly</p>
    <button mat-button matStepperPrevious>Back</button>
  </mat-step>

  <!-- changed step icons -->
  <ng-template matStepperIcon="home">
    <mat-icon>home</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="form">
    <mat-icon>format_align_center</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="last">
    <mat-icon>done_all</mat-icon>
  </ng-template>
</mat-stepper>

I was able to change the icon whenever the user clicks on a step but as long as the step is not active, the icon is either edit or done. I want the custom icons ALWAYS stay the same. So when you click on another step, the step before should not be changed to the home icon.

How can I do this?

See Stackblitz