Wrong icon in angular stepper mat

0

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

I've tried:

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>

Here's the result:

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

    
asked by anonymous 10.11.2018 / 19:12

1 answer

0

It may not be the most intuitive, but ... when the Material Step is editable, which is the default, after completing the step and pressing the next step, the previous step has the "edit" icon.

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

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

    
11.11.2018 / 23:29