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.