CODEWITHSUNDEEP
angular-material
Mukil Deepthi
Mukil Deepthi

Reputation: 6452

Angular material stepper remove icons

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

Upvotes: 15

Views: 10919

Answers (6)

Alan Chen
Alan Chen

Reputation: 347

On Angular Material v.14.1.3, you could add completed="false" properties in <mat-step completed="false"></mat-step>. the step icon will keep number index for selected step.

Upvotes: 5

Chuks Jr.
Chuks Jr.

Reputation: 503

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>

Upvotes: 1

Tabish Zaman
Tabish Zaman

Reputation: 292

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;
}

Upvotes: 1

Gimmly
Gimmly

Reputation: 463

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

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

Upvotes: 1

bahadrdsr
bahadrdsr

Reputation: 474

Here is a simple workaround from the GitHub issue

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

Upvotes: 24

Guilherme Lopes
Guilherme Lopes

Reputation: 31

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

Upvotes: -2

Related Questions