wrong icon in material angular stepper

Question

I'm trying to put a edit icon when a state is "address", but the icon is the must of the first state (home).

I try:

First step:

<ng-template matStepperIcon="edit">
            <mat-icon>home</mat-icon>
          </ng-template>

          <mat-step label="Antes de começar..." state="home">
..........

Second step:

<ng-template matStepperIcon="address">
    <mat-icon>edit</mat-icon>
</ng-template>

<mat-step label="Dados do seu pet..." [stepControl]="secondFormGroup" state="address">    
        <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext>Next</button>
        </div>

This is showing:

The second step must be a edit icon but have the icon of the first step why?

Answer 1

You should be overriding the home icon, change matStepperIcon="address" to the following.

<ng-template matStepperIcon="home">
    <mat-icon>edit</mat-icon>
</ng-template>

Revision

You will need to control the icon override by state, please review the phone and chat states in the below material stackblitz example.

https://stackblitz.com/angular/onvqbjrynkj?file=app%2Fstepper-states-example.html

Revision 2

You could also use *ngIf based on index.

<ng-template matStepperIcon="edit" let-index="index">
            <mat-icon *ngIf="index == 0">home</mat-icon>
            <mat-icon *ngIf="index == 1">edit</mat-icon>
          </ng-template>