从Mat-Stepper角度材质覆盖默认图标 [英] Override the default icon from mat-stepper angular material

问题描述

我正在尝试从步进器材质角度覆盖默认的编辑图标，但这不起作用.

I'm trying to override the default edit icon from stepper material angular but this don't work.

我尝试:

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

    ...

</mat-horizontal-stepper>

这样，我的结果是:

当步进器处于活动状态/不活动状态时:

When the stepper is active/inactive:

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

我有什么特别的事情要做?

There's something special that i have to do?

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

Stackblitz: Click in material page. the home icon is not inside the blue circle.

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

推荐答案

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

I've created an example where the default edit icon is changed: Stackblitz.

在< mat-step> ...</mat-step 的更改的编辑图标外部处移动定义，它应该可以工作(已通过最新的Angular 7.0.2):

Move your definition of the changed edit icon outside of the <mat-step>...</mat-step and it should work (tested with latest 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中的注释).为此，您需要在组件中添加一个提供程序:

In addition I added some examples for changing the icons of the different steps (check the comments in the Stackblitz). For this to work, you need to add a provider to your component:

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-h​​orizo​​ntal-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>

带有 matStepperIcon ='xyz'的 ng-template 更改带有 state ="xyz的 mat-step 的图标".

The ng-template with matStepperIcon='xyz' changes the icon of the mat-step with state="xyz".

这篇关于从Mat-Stepper角度材质覆盖默认图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！