角材料步进器删除图标答案

【问题标题】：Angular material stepper remove icons角材料步进器删除图标
【发布时间】：2019-02-07 14:38:24
【问题描述】：

如何使用角材料去除 mat-step-icon 中的图标。

我在下面尝试过：

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

这适用于编辑和完成状态。也想更改默认状态。不知道取什么名字。

有人可以帮忙吗？

谢谢

【问题讨论】：

【解决方案1】：

这是来自 GitHub issue 的简单解决方法

@ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;
ngAfterViewInit() {
    this.stepper._getIndicatorType = () => 'number';
}

【讨论】：

【解决方案2】：

您可以使用以下模板将图标从默认状态中移除：

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

【讨论】：

【解决方案3】：

您可以在 Angular 项目的 css 文件中使用此样式。

.yourParentDivCssClass ::ng-deep .mat-step-header .mat-step-icon {
  display: none !important;
}

【讨论】：

【解决方案4】：

来自the docs，matStepperIcon 的可能值为

number | edit | done | error

因此，对于默认状态，您需要使用 number，因为您已经覆盖了 edit 和 done。

你应该得到这个：

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

【讨论】：

【解决方案5】：

更新。这样就可以了

 @ViewChild(MatStepper) myStepper: MatStepper;
  ngAfterViewInit() {
      this.myStepper._getIndicatorType = () => 'number';
  }

【讨论】：

【解决方案6】：

如果您想删除材料步进器上的所有图标，一种解决方案是转到您的 styles.css 文件并添加以下内容：

.mat-step-header .mat-step-icon {
    display: none !important;
}

这应该可以解决问题

【讨论】：