Angular material stepper next step showing create instead of 1

Question

I am working on stepper, i want to disable next step until all filled should be filled so i made linear to true in html file

<mat-horizontal-stepper [linear]="true" #stepper>
        <mat-step [stepControl]="firstFormGroup">
          <form [formGroup]="firstFormGroup">

it's working fine but whenever i am going to next step, "1" becomes "cre" on inspecting i got

i didn't user create anywhere in my code it's coming from mat-icon

Answer 1

you can set [completed]="false" on mat-step and you will have only numbers instead of icons.

or to replace the word "create" with the pen icon you need to add the google material font icon link:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

Answer 2

add #stepper in mat-horizontal-stepper

<mat-horizontal-stepper [linear]="true" #stepper>
....
</mat-horizontal-stepper>

then in .ts file get that stepper

@ViewChild('stepper') stepper: MatHorizontalStepper;

and lastly, do it in afterViewInit

ngAfterViewInit() {
  this.stepper._getIndicatorType = () => 'number';
}