我创建了一个示例,其中默认编辑图标已更改:Stackblitz。
将更改后的编辑图标定义放在 <mat-step>...</mat-step>
外部即可正常工作(已测试最新的Angular 7.0.2):
<mat-horizontal-stepper [linear]="isLinear">
<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">
<ng-template matStepperIcon="edit">
<mat-icon>bubble_chart</mat-icon>
</ng-template>
<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
with matStepperIcon='xyz'
会改变状态为"xyz"
的mat-step
的图标。