CODEWITHSUNDEEP
angularangular-material
Enthu
Enthu

Reputation: 532

Ability to customize the icons in matstepper in angular material2

Currently users are locked into using the Material create and done icon for the step headers. These changes add the ability to customize the icons by providing an ng-template with an override. So I have found the update but when I use it as

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

I get this error 

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.

How can I give my desired icons

Upvotes: 3

Views: 12997

Answers (1)

xeofus
xeofus

Reputation: 774

Just install material icons

if already installed, add import in your module

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

if already imported, use instead of <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

Upvotes: 8

Related Questions