angular-material - 是否可以在Material-2步进器中更改已完成步骤的图标

Question

当前，完成步骤的图标是“创建”。如何将其更改为其他一些图标图标行，例如“完成”？

<mat-vertical-stepper>
    <mat-step label="Agreement Preparation">
        <p>Agreement preparion is intiated by our side </p>
    </mat-step>
    <mat-step label="Ready for Biometric">
        <p>Agreement preparion is intiated by our side </p>

    </mat-step>
    <mat-step label="Document in Submission">
        <p>Agreement preparion is intiated by our side </p>

    </mat-step>
</mat-vertical-stepper>

Answer 1

Material 库的当前版本支持此功能。 (5.2.3+)

只需添加一个ng-template即可定义您的自定义图标，并指出您要替换的原始图标(“编辑”或“完成”)。格式如下:

<ng-template matStepperIcon="edit">
  <mat-icon>face</mat-icon>
</ng-template>

在这里，我将“编辑”图标替换为“面部”的 Material 图标。 (这是我用于测试的非常有特色的图标。)

该 ng-template位于 mat-vertical-stepper或 mat-horizontal-stepper内。

因此，以您的示例为例，如果要将“编辑”图标替换为“完成”的实质图标，则可以这样做:

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

    <mat-step label="Agreement Preparation">
        <p>Agreement prepariaton is initiated by our side </p>
    </mat-step>
    <mat-step label="Ready for Biometrics">
        <p>Agreement preparation is initiated by our side </p>
    </mat-step>
    <mat-step label="Document in Submission">
        <p>Agreement preparion is intiated by our side </p>    
    </mat-step>
</mat-vertical-stepper>

Here是一个StackBlitz示例，展示了它的实际作用。