Stepper icon override not same size on not-touched steps #12999
Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
Should an overridden <ng-template matStepperIcon="number"> contain an icon, then the icon is aligned in size with the icons of matStepperIcon="done" and matStepperIcon="edit".
What is the current behavior?
When overriding an <ng-template matStepperIcon="number"> to contain a mat-icon the icon will fill out all the 24x24 px rather than the 16x16px of matStepperIcon="done" | "edit" when the step is not selected. This results in those icons being much larger than the icons prior to the current step
What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-1pdtv3
Is there anything else we should know?
It can be fixed with the following CSS in src/lib/stepper/step-header.scss
.mat-step-icon .mat-icon,
.mat-step-icon-not-touched .mat-icon { // <= This line
font-size: $mat-step-header-icon-size;
height: $mat-step-header-icon-size;
width: $mat-step-header-icon-size;
}