Override the default icon from mat-stepper angular material

Question

I'm trying to override the default edit icon from stepper material angular but this don't work.

I try:

<mat-horizontal-stepper [linear]="isLinear" #stepper>
   <mat-step>
      <form>
           <ng-template matStepperIcon="edit">
                <mat-icon>home</mat-icon>
           </ng-template>

    ...

</mat-horizontal-stepper>

In this way my result is:

When the stepper is active/inactive:

https://i.stack.imgur.com/upB0e.png
https://i.stack.imgur.com/tU143.png

There's something special that i have to do?

Stackblitz: Click in material page. the home icon is not inside the blue circle.

https://stackblitz.com/edit/angular-material-design-wxawqh

Answer 1

I've created an example where the default edit icon is changed: Stackblitz.

Move your definition of the changed edit icon outside of the <mat-step>...</mat-step and it should work (tested with latest Angular 7.0.2):

<mat-horizontal-stepper [linear]="isLinear">

  <!-- change default 'edit' icon -->
  <ng-template matStepperIcon="edit">
    <mat-icon>bubble_chart</mat-icon>
  </ng-template>

  <mat-step label="Antes de começar...">
    <div>
        <button mat-button matStepperNext>Continuar</button>
    </div>
  </mat-step>

In addition I added some examples for changing the icons of the different steps (check the comments in the Stackblitz). For this to work, you need to add a provider to your component:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { MAT_STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';

@Component({
  selector: 'with-material-app',
  templateUrl: './withmaterial.component.html',
  styleUrls: ['./withmaterial.component.css'],
  providers: [{
    provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: { displayDefaultIndicatorType: false }
  }]
})
export class WithMaterialComponent implements OnInit {
  ...
}

and change your mat-horizontal-stepper like this:

<mat-horizontal-stepper [linear]="isLinear">

    <!-- change default 'edit' icon -->
    <ng-template matStepperIcon="edit">
        <mat-icon>bubble_chart</mat-icon>
    </ng-template>

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

    <mat-step label="Antes de começar..." state="home">
        <div>
            <button mat-button matStepperNext>Continuar</button>
        </div>
    </mat-step>

  ...

</mat-horizontal-stepper>

The ng-template with matStepperIcon='xyz' changes the icon of the mat-step with state="xyz".

Answer 2

To extend the accepted answer: I wanted to retain the step number rather than replacing the icon. That's possible using the following:

<mat-horizontal-stepper linear #stepper >
  <ng-template matStepperIcon="edit" let-index="index">{{index + 1}}</ng-template>
  <ng-template matStepperIcon="done" let-index="index">{{index + 1}}</ng-template>
  <mat-step>
    <!-- add steps as usual -->
  </mat-step
</mat-horizontal-stepper>

Answer 3

This example works for me:

<mat-horizontal-stepper labelPosition="bottom" #stepper color="primary" linear >        
    <!-- Define the edit icon, by default is 'create' -->
    <ng-template matStepperIcon="edit">
        <mat-icon>done</mat-icon>
    </ng-template>

    <!-- Define the number of the step -->                  
    <ng-template matStepperIcon="number" let-index="index">
    {{index+1}}
    </ng-template>

    <!-- Make your steps -->
    <mat-step label="Step 1">
        Stepper 1
    </mat-step>
    <mat-step label="Step 2">
        Stepper 2
    </mat-step>
</mat-horizontal-stepper>