Components: Stepper header without icons

Created on 28 Jan 2020  路  2Comments  路  Source: angular/components

Bug, feature request, or proposal:

Bug/feature request

What is the expected behavior?

Just display numbers in stepper headers

What is the current behavior?

Tries to display "create" in the icon after changing to another step

What are the steps to reproduce?

https://stackblitz.com/edit/angular-vpoj5j you can see it here

What is the use-case or motivation for changing an existing behavior?

Not everyone uses the icons

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 8.2.14
typescript 3.5.3

Is there anything else we should know?

I know I can override the icons, however I'm unsure about changing it to always using the 'number' state.
The UX of changing the stepper to these icons doesn't really appeal to me.

Additional info

doing this :

<mat-horizontal-stepper>
  <ng-template matStepperIcon="edit"></ng-template>
  <ng-template matStepperIcon="done"></ng-template>

  <mat-step>...</mat-step>
</mat-horizontal-stepper>

does not do it. the pencil icon continues to appear for opened states

P5 materiastepper feature

Most helpful comment

this, however :

@ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;


ngAfterViewInit() {
  this.stepper._getIndicatorType = () => 'number';
}

does work but is less than ideal.

All 2 comments

this, however :

@ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;


ngAfterViewInit() {
  this.stepper._getIndicatorType = () => 'number';
}

does work but is less than ideal.

This is 100% a bug because numbers are shown when I use the stepper, but as soon as I visit a step and then switch to another step that step begins using <mat-icon>create</mat-icon> which just renders as text because I don't use the Material Icons library.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kara picture kara  路  3Comments

Miiekeee picture Miiekeee  路  3Comments

xtianus79 picture xtianus79  路  3Comments

shlomiassaf picture shlomiassaf  路  3Comments

vitaly-t picture vitaly-t  路  3Comments