Wrong icon on angular Stepper mat

Question

I’m trying to put an Edit icon when the state is address, but the icon shown is from the first state.

I tried to:

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>

That is the result:

The second step should be the Edit icon but it has the first step icon. Why?

Answer 1

It may not be the most intuitive, but... when Material Step is editable (Editable), which is the default, after completing the step and triggering the next step, the previous one gets the "Edit) icon".

In your case with the "home" icon due to the matStepperIcon directive you used to change the icon that comes by default.

So far, Material Step uses only icons: 'create', 'Edit' and 'done' that can be modified, but after changing step it will only use the 'Edit' or 'done' icon in the previous step.