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?

Daniel · Accepted Answer · 2019-10-24T07:57:50.050

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

score 2 · Answer 2 · answered Jul 04 '19 at 11:43

Refer this example angular-material-stepper-example

<!-- changed step icons -->
    <ng-template matStepperIcon="home">
        <mat-icon>home</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="form">
        <mat-icon>format_align_center</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="last">
        <mat-icon>done_all</mat-icon>
    </ng-template>

    <mat-step label="First Step" state="home">
        <div>
            <button mat-button matStepperNext>Continue</button>
    </div>
    </mat-step>

  <mat-step label="Fill out your address" state="form">
    <form [formGroup]="formGroup">
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step label="Done" state="last">
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>

</mat-horizontal-stepper>

score 0 · Answer 3 · answered Mar 01 '21 at 18:23

An additional point to note, it's not just restricted to material icons. You can use custom icons as well.

I wasn't using material icons in my project and didn't want to explicitly import them just for stepper. So I ended up using font awesome as my in my project:

<mat-horizontal-stepper>
    <!-- Icon overrides. -->
    <ng-template matStepperIcon="edit">
        <i class="fa fa-check-circle"></i>
    </ng-template>
    <ng-template matStepperIcon="active">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
    <ng-template matStepperIcon="done">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
    <ng-template matStepperIcon="number">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
</mat-horizontal-stepper>
<!-- END - Material Stepper  -->

How to change state icon in Angular Material stepper?

3 Answers3