From b54be54f5d8097aae1ebf4248f0e41910a46d6c7 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 2 Sep 2018 10:58:21 +0200
Subject: [PATCH] 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.
---
 src/lib/stepper/step-header.html | 75 +++++++++++++++++---------------
 src/lib/stepper/step-header.scss |  3 +-
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/lib/stepper/step-header.html b/src/lib/stepper/step-header.html
index 0d918a394700..e9570c5d0878 100644
--- a/src/lib/stepper/step-header.html
+++ b/src/lib/stepper/step-header.html
@@ -1,46 +1,49 @@
 <div class="mat-step-header-ripple" mat-ripple [matRippleTrigger]="_getHostElement()"></div>
 <div class="mat-step-icon-state-{{state}} mat-step-icon" [class.mat-step-icon-selected]="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>
 
-  <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>
+  <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="'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="'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="'error'" [ngSwitch]="!!(iconOverrides && iconOverrides.error)">
-    <ng-container
-      *ngSwitchCase="true"
-      [ngTemplateOutlet]="iconOverrides.error"
-      [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-    <mat-icon *ngSwitchDefault>warning</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>
 
-  <!-- Custom state. -->
-  <ng-container *ngSwitchDefault [ngSwitch]="!!(iconOverrides && iconOverrides[state])">
-    <ng-container
-      *ngSwitchCase="true"
-      [ngTemplateOutlet]="iconOverrides[state]"
-      [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-    <mat-icon *ngSwitchDefault>{{state}}</mat-icon>
-  </ng-container>
+    <ng-container *ngSwitchCase="'error'" [ngSwitch]="!!(iconOverrides && iconOverrides.error)">
+      <ng-container
+        *ngSwitchCase="true"
+        [ngTemplateOutlet]="iconOverrides.error"
+        [ngTemplateOutletContext]="_getIconContext()"></ng-container>
+      <mat-icon *ngSwitchDefault>warning</mat-icon>
+    </ng-container>
+
+    <!-- Custom state. -->
+    <ng-container *ngSwitchDefault [ngSwitch]="!!(iconOverrides && iconOverrides[state])">
+      <ng-container
+        *ngSwitchCase="true"
+        [ngTemplateOutlet]="iconOverrides[state]"
+        [ngTemplateOutletContext]="_getIconContext()"></ng-container>
+      <mat-icon *ngSwitchDefault>{{state}}</mat-icon>
+    </ng-container>
+  </div>
 </div>
 <div class="mat-step-label"
      [class.mat-step-label-active]="active"
diff --git a/src/lib/stepper/step-header.scss b/src/lib/stepper/step-header.scss
index 228160732d6e..0932012f95e1 100644
--- a/src/lib/stepper/step-header.scss
+++ b/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%;