如何更改 Angular Material 步进器中的状态图标？

Question

我正在使用 Angular Material 步进器。使用 STEPPER_GLOBAL_OPTIONS，我可以像这样更改步骤的状态：

  <mat-step [stepControl]="secondFormGroup" optional state="phone">
  </mat-step>

但是，如何访问这些图标的列表？或者，有没有办法使用我自己的？

Answer 1

默认情况下，步骤标题将使用通过元素设置的材料设计图标中的创建和完成图标。如果您想提供一组不同的图标，您可以通过为要覆盖的每个图标放置一个 matStepperIcon 来实现。各个步骤的索引、活动和可选值可通过模板变量获得：

<mat-vertical-stepper>
  <ng-template matStepperIcon="edit">
    <mat-icon>insert_drive_file</mat-icon>
  </ng-template>

  <ng-template matStepperIcon="done">
    <mat-icon>done_all</mat-icon>
  </ng-template>

  <!-- Custom icon with a context variable. -->
  <ng-template matStepperIcon="number" let-index="index">
    {{index + 10}}
  </ng-template>

  <!-- Stepper steps go here -->
</mat-vertical-stepper>

请注意，在提供自定义图标时，您不仅限于使用 mat-icon 组件。

https://material.angular.io/components/stepper/overview#overriding-icons