如何将角材料步进器步骤编号更改为任何图标或文本？

Question

Angular Material Stepper有以下问题，我无法从文档中找到。

1. 如何显示任何字符串或 html 而不是步进索引号？
2. 当鼠标悬停任何垫子步骤时如何显示matToolTip？

我正在使用最新版本的Material Angular IO。

Answer 1

不幸的是，现在不可能使用材料中的本机挂钩来覆盖该数字。一种可能的解决方案是使用 css 覆盖该值。

这里我们隐藏当前符号并使用我们自己的文本/符号：

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