Angular material stepper remove icons

Question

How to remove the icons in the mat-step-icon using angular material.

I tried below:

<ng-template matStepperIcon="edit"></ng-template>
<ng-template matStepperIcon="done"></ng-template>

this works for edit and done state. want to change the default state as well. dont know what is the name to give.

can anyone help please?

thanks

Answer 1

Here is a simple workaround from the GitHub issue

@ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;
ngAfterViewInit() {
    this.stepper._getIndicatorType = () => 'number';
}

Answer 2

You can use the following template to remove the icons from default state:

<ng-template matStepperIcon="done"></ng-template>

Answer 3

You can use this style in your css file of your angular project.

.yourParentDivCssClass ::ng-deep .mat-step-header .mat-step-icon {
  display: none !important;
}

Answer 4

From the docs, the possible values for matStepperIcon are

number | edit | done | error

So for default state, you'll want to use number since you have edit and done covered.

You should end up with this:

<ng-template matStepperIcon="number"></ng-template>

Answer 5

if you want to remove all the icons on your material stepper one solution is to go to your styles.css file and add the following:

.mat-step-header .mat-step-icon {
    display: none !important;
}

This should do the trick