Stepper header without icons

[narthur157]

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?

Current. 5.2.4

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.

[narthur157]

There is a simple enough workaround, but it is not especially pretty:

@ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;


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

It is actually sort of frightening that this is permissible by ts

[mmalerba]

I think we could allow more flexibility with matStepperIcon if we added a let- binding on the directive so that people can have access to the step in the icon template. That should be able to support this use case as well as other things people may want to do. We should also allow people to specify a custom icon for the number steps, if we don't do that already. I think it only supports overriding edit and complete right now.

@crisbeto this sound reasonable to you?

[crisbeto]

I avoided adding the ability to override the number icon, because I wasn't sure how people would be able to do custom numbering @mmalerba, but your suggestion for adding a template context variable would work.

@narthur157 you can still replace the edit and done icons with blank ones. Note that the feature was added in Material 5.2.0, whereas your example is based on 5.1.0:

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

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

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}