Angular material stepper next step showing create instead of 1

问题

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

回答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">

回答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';
}

回答3:

Probably you use another font-family instead default. You can solve this issue with fix 'Material Icon' for font-family in pages that use the stepper.

:host /deep/ .material-icons {
  font-family: 'Material Icons' !important;
}

来源：https://stackoverflow.com/questions/51214275/angular-material-stepper-next-step-showing-create-instead-of-1