Components: Linear stepper shows edit icons instead of done icons

[Goodwine]

Bug:

Stepper shows edit icons instead of "done" icons

What is the expected behavior?

Completed steps should have a "done" icon on a linear stepper.

What is the current behavior?

Completed steps show an edit icon

What are the steps to reproduce?

https://angular-19juam.stackblitz.io

1. Fill step 1
2. Click Next
3. Notice icon on label

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

The checkmark makes it easier to understand that a step is done. Perhaps the edit icon is still useful for :hover and :focus. Or perhaps the edit icon would work better on a non-linear stepper.

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

Current build: 5.0.0-rc.3-05d726d

Is there anything else we should know?

On the issue #7260, it was marked as fixed but the stepper doesn't meet the material guidelines yet, and this is one of the reasons why.

[Goodwine]

@mmalerba

[iamNavaneeth]

Any update on this yet?

[iamNavaneeth]

Temporary CSS fix:

.mat-step-header {
[ng-reflect-ng-switch="edit"].mat-step-icon {
background: green;

.mat-icon.material-icons.ng-star-inserted {
  color: green;
  position: relative;
  left: -15px;
  &::before {
    content: 'check';
    color: #fff;
    position: relative;
    left: 15px;
    font-weight: bold;
  }
}

}
}

[mmalerba]

It is now possible to override the edit and done icons using the matStepperIcon directive. Usage shown here: https://stackblitz.com/edit/angular-19juam-mwzov3?file=app/stepper-overview-example.html

I'm lowering the priority on this issue since its easy for the user to customize, but leaving it open because I agree that this may not be the most intuitive default experience.

[kuhnroyal]

@mmalerba It's nice that you can override the edit state icon but it's actually completely unclear what the edit state and done state represent. I can not get any step into the done state, no matter if linear, optional,completed or not.
There is documentation needed about how to mark a state as 'done'.
Also I am missing some kind of error state for a step. Is there an issue I can follow?

[mmalerba]

@kuhnroyal

• I created an issue to track documentation / example improvements: #10381
• There is a feature request for error state here: #8950
• To answer your question about done state, if the step is done and editable we show the edit (pencil) icon rather than the done (check) icon. Making the steps non-editable will show the done icon, I've changed the first step in the stepper here to non-editable to demonstrate: https://stackblitz.com/edit/angular-t4sy5g?file=app/stepper-overview-example.html I agree that this is a little weird, so I've left this issue open to track coming up with something better

[kuhnroyal]

@mmalerba Nice, thanks, will follow these issues.

[arodr967]

Those edit icons have truly been a pain. 😓
I am trying to create a non-linear stepper.

First of, this does not make visual sense:

I lose the numbers and I just have edit icons.

In order to keep the numbers and not have the edit icons, I need to mark each step as not completed:

<mat-step [completed]="false">
  <!-- step contents... -->
</mat-step>

Now I get this:

Beautiful!

Well now what if I want to make the step completed so that it can show the check icon!?!?!?
I mark the step completed and navigate to the next step like this:

completeItem() {
  this.stepper.selected.completed = true;
  this.stepper.next();
}

Now I get the freakin' edit icon again 😅! (And I can't mark the step as not editable because then I won't be able to click on it, and I would like to)

So... I guess I should just override the edit icon to the check icon:

<ng-template matStepperIcon="edit">
  <mat-icon>check</mat-icon>
</ng-template>

Awesome!!!

But now, I would like to always have the check icon displayed (when step is completed), even when I am currently on that step. So for example, if I am currently on the Business step and it is completed, it should have a check icon, not the number of the step.

Does anyone have a solution for this?

---

On another note, I would like to back up @Goodwine's idea of enabling the edit icon on :hover and/or :focus.

[thomasnimmi29]

I may be little late, but this might help you. Working good for me.
<ng-template matStepperIcon="edit" let-index="index"> {{index + 1}} </ng-template>

[GautamArya]

@arodr967 I absolutely agree with you. Especially with the last case you have encountered.

But now, I would like to always have the check icon displayed (when step is completed), even when I am currently on that step. So for example, if I am currently on the Business step and it is completed, it should have a check icon, not the number of the step.

[arodr967]

So according to the Material UI Guidelines, it seems like when a step is completed and you click back into it, it will just show the number. Right now that is how it is coded in this PR https://github.com/angular/material2/pull/11457.

[hevans90]

Thanks for investigating this @arodr967 - without your post I would've given up on this component. The behaviour of the stepper icons are still completely broken/identical to what you posted back in April. Using @angular/material 7.1.

The workarounds required here are silly - when is this going to be fixed?

[arodr967]

Hey @hevans90! The stepper should be able to work with that behavior by injecting the following injection token to your component or module:

    {
      provide: MAT_STEPPER_GLOBAL_OPTIONS,
      useValue: { displayDefaultIndicatorType: false }
    }

This talks about how to add custom states but it will also give the stepper this new behavior.

[xellafe]

<ng-template matStepperIcon="edit" let-index="index">
    <mat-icon *ngIf="notes[index].pristine || (notes[index].dirty && notes[index].value.length == 0)">edit</mat-icon>
    <mat-icon *ngIf="notes[index].dirty && notes[index].value.length > 0">done</mat-icon>
</ng-template>

This is my solution: just use an array to map some resource that define the state of every step and switch the icons accordly.

[benwinding]

This works well enough for me...

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

[akiik]

Set the displayDefaultIndicatorType option to false to get rid of edit icons for completed steps:

@NgModule({
  providers: [
    {
      provide: STEPPER_GLOBAL_OPTIONS,
      useValue: { displayDefaultIndicatorType: false }
    }
  ]
})

And if you want to show a "done" icon for the final step which was my case:

_Option one: final step is set editable and done icon is shown when the step is active, overwrite edit icon_
_Option two: final step is set not editable and done icon is always shown, overwrite number icon_

Below is the code for the first option, just replace the icon name for the second option.

<ng-template matStepperIcon="edit" let-index="index" let-active="active">
  <mat-icon *ngIf="index === stepper.steps.length - 1; else default">done</mat-icon>
  <ng-template #default>{{index + 1}}</ng-template>
</ng-template>

_Angular Material 8.2.3._

[jaydipl]

It works for me. I was able to override pencil icon and display done icon by just adding below code just after stepper tag and outside of mat-step tag.

Refer below code for reference.

<mat-horizontal-stepper #stepper>
  <ng-template matStepperIcon="edit">
    <mat-icon>check</mat-icon>
  </ng-template>
  <mat-step>
    <ng-template matStepLabel>Make changes</ng-template>
</mat-step>
  <mat-step>
    <ng-template matStepLabel>Confirm changes</ng-template>
</mat-step>
  <mat-step>
    <ng-template matStepLabel>Saved</ng-template>
</mat-step>
</mat-horizontal-stepper>

Angular material version 8.2.2.

[thakkery]

I came across this when trying to add custom icons to the material stepper. I'm also experiencing this issue. Any idea on how to work around this with custom icons for both the "done" state and also the "edit" state?