question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Stepper header without icons

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:2
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
tatsujbcommented, Jan 28, 2020

this, however :

@ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;


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

does work but is less than ideal.

0reactions
FreebeJancommented, Dec 5, 2022

I would be interested in this feature as well, how to get it picked up?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Stepper header without icons · Issue #10513 - GitHub
Just display numbers in stepper headers What is the current behavior? Tries to display "create" in the icon after changing to another step...
Read more >
Angular material stepper remove icons - Stack Overflow
Here is a simple workaround from the GitHub issue @ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper; ngAfterViewInit() ...
Read more >
Stepper | Angular Material
Overriding icons. By default, the step headers will use the create and done icons from the Material design icon set via <mat- ...
Read more >
Angular Material UI: Stepper - Codeible
The Stepper component allows us to traverse through content 1 step at a time. ... Instead of displaying the labels next to the...
Read more >
Stepper | Angular Material
Selector: mat-step-header ... Overrides for the header icons, passed in via the stepper. @Input() ... Default color to fall back to if no...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found