Question

目前，用户无法使用素材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

能够在角度材质2中自定义matstepper中的图标

1 个答案: