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?

Answer 1

Add empty edit state It will override default behaviour

Try this:

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