从Mat-Stepper角度材质覆盖默认图标

Question

我试图覆盖步进材质角度的默认编辑图标，但这不起作用。

我尝试：

<mat-horizontal-stepper [linear]="isLinear" #stepper>
   <mat-step>
      <form>
           <ng-template matStepperIcon="edit">
                <mat-icon>home</mat-icon>
           </ng-template>

    ...

</mat-horizontal-stepper>

这样，我的结果是：

当步进器处于活动状态/非活动状态时：

https://i.stack.imgur.com/upB0e.png
https://i.stack.imgur.com/tU143.png

我必须做些特别的事情吗？

Stackblitz：单击材料页面。主页图标不在蓝色圆圈内。

https://stackblitz.com/edit/angular-material-design-wxawqh

Answer 1

我创建了一个示例，其中默认的编辑图标已更改：Stackblitz。

将您对已更改的编辑图标的定义移到之外，<mat-step>...</mat-step它应该可以工作（已通过最新的Angular 7.0.2测试）：

<mat-horizontal-stepper [linear]="isLinear">

  <!-- change default 'edit' icon -->
  <ng-template matStepperIcon="edit">
    <mat-icon>bubble_chart</mat-icon>
  </ng-template>

  <mat-step label="Antes de começar...">
    <div>
        <button mat-button matStepperNext>Continuar</button>
    </div>
  </mat-step>

另外，我还添加了一些示例，用于更改不同步骤的图标（请检查Stackblitz中的注释）。为此，您需要在组件中添加一个提供程序：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { MAT_STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';

@Component({
  selector: 'with-material-app',
  templateUrl: './withmaterial.component.html',
  styleUrls: ['./withmaterial.component.css'],
  providers: [{
    provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: { displayDefaultIndicatorType: false }
  }]
})
export class WithMaterialComponent implements OnInit {
  ...
}

并mat-horizontal-stepper像这样更改您的：

<mat-horizontal-stepper [linear]="isLinear">

    <!-- change default 'edit' icon -->
    <ng-template matStepperIcon="edit">
        <mat-icon>bubble_chart</mat-icon>
    </ng-template>

    <!-- changed step icons -->
    <ng-template matStepperIcon="home">
        <mat-icon>home</mat-icon>
    </ng-template>

    <mat-step label="Antes de começar..." state="home">
        <div>
            <button mat-button matStepperNext>Continuar</button>
        </div>
    </mat-step>

  ...

</mat-horizontal-stepper>

在ng-template与matStepperIcon='xyz'该变化的图标mat-step用state="xyz"。