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

Afsun Khammadli

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.

Teddy Sterne

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to change state icon in Angular Material stepper?

How to change color of angular material stepper step icons

How to change state icon in Angular material stepper dynamically created component?

Angular material stepper change icon color

is there an option to change icon for completed step in material-2 stepper

How to reset a 'Material Angular Stepper' Step?

How to make CSS change in Angular Material Stepper?

How to put text + icon as stepper's step title in flutter

Angular - How to Validate each step in Angular Material stepper

wrong icon in material angular stepper

Angular material stepper remove numbers

how to change angular stepper progress color when next step active

Angular material 2 stepper - next step

Angular Material Stepper Component For Each Step

How to stop user moving to next step until finish the current step using Angular Material Stepper(Angular 4)

How to move stepper from one step to second step using angular and angular material

Angular Material: How to set each mat-horizontal-stepper stepper icon with different background color in TS

How to change the angular material mat stepper label color?

How to customize colors in Material UI Stepper Step?

Angular - Material Stepper Skips one step on Next Step Click

How to set material stepper to open second item by default and set the icon color?(Angular Material)

how to make active previous all steps of selectedIndex step using angular material stepper and angular 6

How to change angular material sort icon

React Material UI - Change Stepper text color

How to set second step as active step in Material-2 stepper?

How to reset to step one Angular stepper CDK?

Angular 9 - Remove default icon (create) on Angular Material Stepper

Allocating full width for the one step in the Angular Material stepper

Angular Material Stepper with Separate Component for each step - ExpressionChangedAfterItHasBeenCheckedError