如何阻止Angular Material Stepper步骤间图标切换并保留数字图标？

我完全懂你想要的效果——不管步骤是完成状态还是可编辑状态，都一直显示数字，而不是自动切换成打勾或者编辑笔的图标对吧？这其实不难实现，下面给你几种实用的方案：

方案一：为单个步骤自定义图标模板 #

Angular Material的Stepper允许我们通过matStepIcon指令自定义每个步骤的图标。我们只需要给每个<mat-step>指定一个固定显示数字的模板就行，完全忽略默认的状态切换逻辑。

示例代码：

<mat-horizontal-stepper>
  <mat-step>
    <!-- 固定显示数字1 -->
    <ng-template matStepIcon>1</ng-template>
    <ng-template matStepLabel>用户信息填写</ng-template>
    <!-- 这里放你的步骤内容 -->
    <button mat-button matStepperNext>下一步</button>
  </mat-step>

  <mat-step>
    <!-- 固定显示数字2 -->
    <ng-template matStepIcon>2</ng-template>
    <ng-template matStepLabel>订单确认</ng-template>
    <!-- 步骤内容 -->
    <button mat-button matStepperPrevious>上一步</button>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>

  <mat-step>
    <!-- 固定显示数字3 -->
    <ng-template matStepIcon>3</ng-template>
    <ng-template matStepLabel>支付完成</ng-template>
    <!-- 步骤内容 -->
    <button mat-button matStepperPrevious>上一步</button>
    <button mat-button>完成</button>
  </mat-step>
</mat-horizontal-stepper>

这样设置后，每个步骤的图标就会一直显示对应的数字，不会随着步骤状态变化而切换。

方案二：全局统一配置（所有Stepper生效） #

如果你的项目里所有的Stepper都需要这个效果，那没必要逐个步骤设置，直接全局配置更高效。

方法A：用CSS样式覆盖 #

在全局样式文件（比如styles.scss）里添加以下样式，隐藏默认的状态图标，强制显示步骤数字：

/* 隐藏默认的完成/编辑状态图标 */
.mat-step-icon-state-done,
.mat-step-icon-state-edit {
  display: none !important;
}

/* 确保步骤数字居中显示 */
.mat-step-text-label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

这种方式简单直接，不需要修改组件逻辑，适合快速实现需求。

方法B：自定义全局步骤图标组件 #

如果需要更灵活的控制（比如后续要修改数字样式），可以创建一个自定义组件作为所有Stepper的默认图标：

1. 先创建自定义图标组件：

import { Component, Input } from '@angular/core';
import { MatStepIcon } from '@angular/material/stepper';

@Component({
  selector: 'app-custom-step-icon',
  template: `<span class="step-number">{{ stepIndex + 1 }}</span>`,
  styles: [`
    .step-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      /* 这里可以自定义数字的样式，比如颜色、字体大小 */
      color: inherit;
      font-size: inherit;
    }
  `]
})
export class CustomStepIconComponent extends MatStepIcon {
  @Input() stepIndex!: number;
}

2. 在你的模块中注册组件并配置全局Stepper选项：

import { NgModule } from '@angular/core';
import { MatStepperModule, MAT_STEPPER_GLOBAL_OPTIONS } from '@angular/material/stepper';
import { CustomStepIconComponent } from './custom-step-icon.component';

@NgModule({
  imports: [MatStepperModule],
  declarations: [CustomStepIconComponent],
  providers: [
    {
      provide: MAT_STEPPER_GLOBAL_OPTIONS,
      useValue: {
        stepIcon: CustomStepIconComponent
      }
    }
  ]
})
export class YourFeatureModule { }

这样所有的Stepper都会自动使用这个自定义图标，始终显示步骤数字。

你可以根据自己的项目场景选择合适的方案，单个步骤自定义或者全局统一配置都能解决问题~

内容的提问来源于stack exchange，提问作者Paige Fawcett