Переопределить значок по умолчанию для углового материала мат-степпер

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".

Answer 2

Этот пример работает для меня:

<mat-horizontal-stepper labelPosition="bottom" #stepper color="primary" linear >        
    <!-- Define the edit icon, by default is 'create' -->
    <ng-template matStepperIcon="edit">
        <mat-icon>done</mat-icon>
    </ng-template>

    <!-- Define the number of the step -->                  
    <ng-template matStepperIcon="number" let-index="index">
    {{index+1}}
    </ng-template>

    <!-- Make your steps -->
    <mat-step label="Step 1">
        Stepper 1
    </mat-step>
    <mat-step label="Step 2">
        Stepper 2
    </mat-step>
</mat-horizontal-stepper>

Answer 3

Я думаю, что первое место, на которое вам следует обратить внимание, это документация и примеры по Angular Material.

Переопределение значков описано простым способом

https://material.angular.io/components/stepper/overview#overriding-icons

Из документов:

По умолчанию заголовки шагов будут использовать значки create и done из Значок Дизайн материала установлен через элементы. Если хотите предоставить другой набор значков, вы можете сделать это, поместив matStepperIcon для каждого из значков, которые вы хотите переопределить. индекс, активные и необязательные значения отдельных шагов доступно через переменные шаблона:

<mat-vertical-stepper>
  <ng-template matStepperIcon="edit">
    <mat-icon>insert_drive_file</mat-icon>
  </ng-template>

  <ng-template matStepperIcon="done">
    <mat-icon>done_all</mat-icon>
  </ng-template>

  <!-- Custom icon with a context variable. -->
  <ng-template matStepperIcon="number" let-index="index">
    {{index + 10}}
  </ng-template>

  <!-- Stepper steps go here -->
</mat-vertical-stepper>