How to change angular material stepper step numbers to any icon or text?

7
votes

Angular Material Stepper has following problems for me which I can not found from documentation.

  1. How can I display any string or html instead of stepper index numbers?
  2. How can display matToolTip when mouse hover any mat step?

I am using latest version of Material Angular IO.

4
angularangular-material

4 Answers

4
votes

Unfortunately, right now it is impossible to override the number using native hooks from material. One possible solution is to use css to overwrite the value.

Here we hide the current symbol and use our own text/symbols:

mat-step-header .mat-step-label {
    overflow: visible;
}

mat-step-header .mat-step-icon-not-touched span,
mat-step-header .mat-step-icon span,
mat-step-header .mat-step-icon-not-touched .mat-icon,
mat-step-header .mat-step-icon .mat-icon {
  display: none;
}

mat-step-header:nth-of-type(1) .mat-step-icon-not-touched:after,
mat-step-header:nth-of-type(1) .mat-step-icon:after {
  content: 'New 1';
}

.active-step-1 mat-step-header:nth-of-type(1) .mat-step-icon-not-touched::after,
.active-step-1 mat-step-header:nth-of-type(1) .mat-step-icon::after {
  content: 'add_circle' !important; /* name of the material icon */
  font-family: 'Material Icons' !important;
  font-feature-settings: 'liga' 1;
}
1
votes

To answer the second part of your question, you can easily display a tooltip by wrapping the content of <ng-template matStepLabel> into a div with a matTooltip property. This demo shows an example.

1
votes

I think this could be work for you.

<ng-template matStepLabel>
    <span matTooltip="Fill out your name">Fill out your name</span>
</ng-template>
0
votes

I could not get the above selected answer to work, but for icons I did get this other SO answer to work successfully. I'm didn't test for text, only icons.

Change step number to a mat-icon in an Angular Material Stepper

Although the answer for me also needed me to workout how to import the stated provided (wasn't included in the answer).

import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';

I also found a good demo in Stackblitz:

https://stackblitz.com/angular/maxbjapeayr?file=app/stepper-states-example.ts