如何在角度垫步进器中显示默认图标而不是“完成”图标答案

【问题标题】：How to show default icons instead 'done' icon in angular mat-stepper如何在角度垫步进器中显示默认图标而不是“完成”图标
【发布时间】：2020-02-13 09:36:26
【问题描述】：

我正在使用 Angular 8.2.4 和水平垫步进器。我已经在每个步骤中自定义了图标，并且一旦访问了每个步骤，我就不需要显示“勾号”图标（对应于完成状态）。这就是它现在的样子。

`<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"。

如何避免显示完成状态的图标并保持自定义默认图标不变而不显示“勾号”图标？

【问题讨论】：

标签： angular angular-material angular8 mat-stepper

【解决方案1】：

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

试试这个：

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

【讨论】：

谢谢，它隐藏了“完成”图标，但也不显示默认图标。你知道如何显示默认图标吗？
它会覆盖你所有的自定义图标吗？
你能创建 stackblitz 吗？
对不起，我无法制作自己的代码段，但我尝试了以下链接，将您的建议添加为：`' 这里是链接：stackblitz.com/edit/…
你试过添加你可以在里面添加默认图标

【解决方案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  -->

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

【讨论】：