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

Question

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.

Answer 1

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

Answer 2

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.