angular - 能够在 angular material2 中自定义 matstepper 中的图标

Question

目前，用户只能使用 Material create 和 done 图标作为步骤标题。这些更改通过提供具有覆盖的 ng-template 添加了自定义图标的能力。所以我找到了update但是当我把它用作

<mat-horizontal-stepper [linear]="isLinear">
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <ng-template matStepperIcon="edit">
        <custom-icon>edit</custom-icon>
       </ng-template>
      <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

我收到这个错误

Uncaught Error: Template parse errors:
    'custom-icon' is not a known element:
    1. If 'custom-icon' is an Angular component, then verify that it is part of this module.
    2. If 'custom-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我怎样才能给我想要的图标

Answer 1

只需 install material icons

如果已安装，请在您的模块中添加导入

import {MatIconModule} from '@angular/material/icon';
@NgModule({
   imports: [
     MatIconModule
]
})

如果已经导入，请使用 <custom-icon> 代替<mat-icon>

<mat-vertical-stepper>
    <ng-template matStepperIcon="edit">
            <mat-icon>check</mat-icon>
    </ng-template>
   <!-- Stepper steps go here -->
   <mat-step label="step 1">step 1 content</mat-step>
   <mat-step label="step 2">step 2 content</mat-step>
   <mat-step label="step 3">step 3 content</mat-step>
</mat-vertical-stepper>

stackblitz example