Внутри mat-step вставьте эти шаблоны, заменив таким образом номер, который является значением по умолчанию.
<mat-horizontal-stepper [linear]="true" #stepper>
<!-- STEPS -->
<mat-step label="First Step" state="your-state-name-here-1">
<div>
<button mat-button matStepperNext>next</button>
</div>
</mat-step>
<mat-step label="Second Step" state="your-state-name-here-2">
<div>
<button mat-button matStepperNext>next</button>
</div>
</mat-step>
<mat-step label="Third Step" state="your-state-name-here-3">
<div>
<button mat-button matStepperNext>next</button>
</div>
</mat-step>
<!-- STEPS -->
<!-- Replace icon mat-step -->
<ng-template matStepperIcon="your-state-name-here-1">
<mat-icon>your-icon-name-or-blank</mat-icon>
</ng-template>
<ng-template matStepperIcon="your-state-name-here-2">
<mat-icon>your-icon-name-or-blank</mat-icon>
</ng-template>
<ng-template matStepperIcon="your-state-name-here-3">
<mat-icon>your-icon-name-or-blank</mat-icon>
</ng-template>
<!-- Replace icon mat-step -->
</mat-horizontal-stepper>
Obs: Чтобы использовать настраиваемые состояния шага, вы должны добавьте параметр displayDefaultIndicatorType к глобальным параметрам шагового двигателя по умолчанию, который можно указать, указав значение для STEPPER_GLOBAL_OPTIONS в модуле root вашего приложения или указав c дочерний модуль.
@NgModule({
providers: [
{
provide: STEPPER_GLOBAL_OPTIONS,
useValue: { displayDefaultIndicatorType: false }
}
]
})
Официальная документация