How to show default icons instead 'done' icon in angular mat-stepper

Question

I am using angular 8.2.4 and horizontal mat-stepper. I have customized the icons in each step and I do not need to show the 'tick' icon (which corresponds to the done state) once each and every step is visited. This is how it looks like now.

`<mat-horizontal-stepper #stepper [linear]="true" class="register-stepper">
          <!--<ng-template matStepperIcon="done">
            <mat-icon>done</mat-icon>
          </ng-template>-->
         <ng-template matStepperIcon="user">
                  <mat-icon>account_circle</mat-icon>
         </ng-template>
         <mat-step [completed]="true" state="user">
                  <ng-template class="form-control" matStepLabel>Basic</ng-template>
                  <h4 class="cgg-component-heading">Basic Information</h4>                  
                </mat-step>
        </mat-horizontal-stepper>`

I have already removed the matStepperIcon="done".

How can I avoid this done state's icon displaying and keep the custom default icon as it is without showing the 'tick' icon?

score 0 · Accepted Answer · answered Feb 13 '20 at 11:27

0

Add empty edit state It will override default behaviour

Try this:

<ng-template matStepperIcon="edit">
</ng-template>

answered Feb 13 '20 at 11:27

Chellappan வ

23,645
3
29
60

Thanks, it hides the 'done' icon, but do not show the default icons as well. Do you have any idea how to show default icons? – SMash Feb 14 '20 at 06:07
Does it override all your custom icon? – Chellappan வ Feb 14 '20 at 06:10
Can you create stackblitz? – Chellappan வ Feb 14 '20 at 06:33
SOrry I could not make my own code segment but I have tried the following link by adding your suggestion as: ` ' Here is the link : https://stackblitz.com/edit/angular-x9ujf1?file=app%2Fstepper-overview-example.html – SMash Feb 14 '20 at 10:59
Have you tried to add you can add default icon inside – Chellappan வ Feb 14 '20 at 11:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/207836/discussion-between-smash-and-chellappan-). – SMash Feb 14 '20 at 11:30

score 0 · Answer 2 · answered Mar 01 '21 at 18:31

Need a bit more clarity, on what you mean by default icon. From your image above I'm assuming you want the "account_circle" icon on all of your steps. In that case, the below code would work.

<!-- START - Material Stepper  -->
<mat-horizontal-stepper>
    <!-- Icon overrides. -->
    <ng-template matStepperIcon="edit">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="active">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="done">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="number">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
</mat-horizontal-stepper>
<!-- END - Material Stepper  -->

Just replace the state with whichever icon you want. Unless you explicitly replace the state, your icon would not be used by material stepper.

How to show default icons instead 'done' icon in angular mat-stepper

2 Answers2