角材2のマットステッパーのアイコンをカスタマイズする能力

Question

現在、ステップヘッダーには材料createおよびdoneアイコンを使用してユーザーがロックされています。これらの変更は、ng-templateにオーバーライドを指定することで、アイコンをカスタマイズする機能を追加します。 だから更新GITHUB を発見したが、私は

`<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