是否有选项可以更改material-2 stepper中已完成步骤的图标

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>

在这里,我将'edit'图标替换为'face'的材质图标.(这是我用于测试目的的一个非常独特的图标.)

这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>

这是一个StackBlitz示例,显示了这一点.