How to change state icon in Angular Material stepper?

Question

I am using Angular Material stepper. Using STEPPER_GLOBAL_OPTIONS, I am able to change the state of the steps like this:

  <mat-step [stepControl]="secondFormGroup" optional state="phone">
  </mat-step>

However, how do I access the list of these icons? Or, is there any way to use my own?

Answer 1

By default, the step headers will use the create and done icons from the Material design icon set via elements. If you want to provide a different set of icons, you can do so by placing a matStepperIcon for each of the icons that you want to override. The index, active, and optional values of the individual steps are available through template variables:

<mat-vertical-stepper>
  <ng-template matStepperIcon="edit">
    <mat-icon>insert_drive_file</mat-icon>
  </ng-template>

  <ng-template matStepperIcon="done">
    <mat-icon>done_all</mat-icon>
  </ng-template>

  <!-- Custom icon with a context variable. -->
  <ng-template matStepperIcon="number" let-index="index">
    {{index + 10}}
  </ng-template>

  <!-- Stepper steps go here -->
</mat-vertical-stepper>

Note that you aren't limited to using the mat-icon component when providing custom icons.

https://material.angular.io/components/stepper/overview#overriding-icons