Odtnhj

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>