Ndtyjky

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?

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>