fix(stepper): custom icons not centered inside circle

Fixes custom stepper icons not being centered inside the circle, because they aren't inside a `.mat-step-icon-content` which is what does the centering.

Fixes #12945.

Author: crisbeto

src/lib/stepper/step-header.html

@@ -3,29 +3,31 @@
      [class.mat-step-icon-not-touched]="state == 'number' && !selected"
      [ngSwitch]="state">
 
-  <ng-container *ngSwitchCase="'number'" [ngSwitch]="!!(iconOverrides && iconOverrides.number)">
-    <ng-container
-      *ngSwitchCase="true"
-      [ngTemplateOutlet]="iconOverrides.number"
-      [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-    <span class="mat-step-icon-content" *ngSwitchDefault>{{index + 1}}</span>
-  </ng-container>
+  <div class="mat-step-icon-content">
+    <ng-container *ngSwitchCase="'number'" [ngSwitch]="!!(iconOverrides && iconOverrides.number)">
+      <ng-container
+        *ngSwitchCase="true"
+        [ngTemplateOutlet]="iconOverrides.number"
+        [ngTemplateOutletContext]="_getIconContext()"></ng-container>
+      <span *ngSwitchDefault>{{index + 1}}</span>
+    </ng-container>
 
-  <ng-container *ngSwitchCase="'edit'" [ngSwitch]="!!(iconOverrides && iconOverrides.edit)">
-    <ng-container
-      *ngSwitchCase="true"
-      [ngTemplateOutlet]="iconOverrides.edit"
-      [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-    <mat-icon class="mat-step-icon-content" *ngSwitchDefault>create</mat-icon>
-  </ng-container>
+    <ng-container *ngSwitchCase="'edit'" [ngSwitch]="!!(iconOverrides && iconOverrides.edit)">
+      <ng-container
+        *ngSwitchCase="true"
+        [ngTemplateOutlet]="iconOverrides.edit"
+        [ngTemplateOutletContext]="_getIconContext()"></ng-container>
+      <mat-icon *ngSwitchDefault>create</mat-icon>
+    </ng-container>
 
-  <ng-container *ngSwitchCase="'done'" [ngSwitch]="!!(iconOverrides && iconOverrides.done)">
-    <ng-container
-      *ngSwitchCase="true"
-      [ngTemplateOutlet]="iconOverrides.done"
-      [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-    <mat-icon class="mat-step-icon-content" *ngSwitchDefault>done</mat-icon>
-  </ng-container>
+    <ng-container *ngSwitchCase="'done'" [ngSwitch]="!!(iconOverrides && iconOverrides.done)">
+      <ng-container
+        *ngSwitchCase="true"
+        [ngTemplateOutlet]="iconOverrides.done"
+        [ngTemplateOutletContext]="_getIconContext()"></ng-container>
+      <mat-icon *ngSwitchDefault>done</mat-icon>
+    </ng-container>
+  </div>
 </div>
 <div class="mat-step-label"
      [class.mat-step-label-active]="active"

src/lib/stepper/step-header.scss

@@ -30,7 +30,8 @@ $mat-step-header-icon-size: 16px !default;
   position: relative;
 }
 
-.mat-step-icon-content {
+.mat-step-icon-content,
+.mat-step-icon .mat-icon {
   // Use absolute positioning to center the content, because it works better with text.
   position: absolute;
   top: 50%;