如何在 angular mat-stepper 中显示默认图标而不是 'done' 图标

Question

我正在使用 angular 8.2.4 和水平垫步进器。我已经自定义了每个步骤中的图标，我不需要在访问每个步骤后显示 'tick' 图标（对应于完成状态）。这就是现在的样子。

`<mat-horizontal-stepper #stepper [linear]="true" class="register-stepper">
          <!--<ng-template matStepperIcon="done">
            <mat-icon>done</mat-icon>
          </ng-template>-->
         <ng-template matStepperIcon="user">
                  <mat-icon>account_circle</mat-icon>
         </ng-template>
         <mat-step [completed]="true" state="user">
                  <ng-template class="form-control" matStepLabel>Basic</ng-template>
                  <h4 class="cgg-component-heading">Basic Information</h4>                  
                </mat-step>
        </mat-horizontal-stepper>`

我已经删除了the matStepperIcon="done"。

如何避免显示此完成状态的图标并保持自定义默认图标不变而不显示 'tick' 图标？

Answer 1

添加空编辑状态它将覆盖默认行为

试试这个：

<ng-template matStepperIcon="edit">
</ng-template>

Answer 2

需要更清楚地了解默认图标的含义。根据您上面的图片，我假设您想要在所有步骤上使用“account_circle”图标。在这种情况下，下面的代码将起作用。

<!-- START - Material Stepper  -->
<mat-horizontal-stepper>
    <!-- Icon overrides. -->
    <ng-template matStepperIcon="edit">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="active">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="done">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="number">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
</mat-horizontal-stepper>
<!-- END - Material Stepper  -->

只需将状态替换为您想要的任何图标即可。除非您明确替换状态，否则 material 步进器不会使用您的图标。

如何在 angular mat-stepper 中显示默认图标而不是 'done' 图标

How to show default icons instead 'done' icon in angular mat-stepper

angular-material

angular

mat-stepper

angular8