fix(stepper): improved alignment for step icons

Switches to using absolute positioning to center the stepper icons. This works better with the text-based icons. Fixes angular#12696.
crisbeto · Aug 16, 2018 · 36d8502 · 36d8502
1 parent b2247f8
commit 36d8502
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/lib/stepper/step-header.html b/src/lib/stepper/step-header.html
@@ -8,23 +8,23 @@
       *ngSwitchCase="true"
       [ngTemplateOutlet]="iconOverrides.number"
       [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-    <span *ngSwitchDefault>{{index + 1}}</span>
+    <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 *ngSwitchDefault>create</mat-icon>
+    <mat-icon class="mat-step-icon-content" *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 *ngSwitchDefault>done</mat-icon>
+    <mat-icon class="mat-step-icon-content" *ngSwitchDefault>done</mat-icon>
   </ng-container>
 </div>
 <div class="mat-step-label"

diff --git a/src/lib/stepper/step-header.scss b/src/lib/stepper/step-header.scss
@@ -26,10 +26,16 @@ $mat-step-header-icon-size: 16px !default;
   border-radius: 50%;
   height: $mat-stepper-label-header-height;
   width: $mat-stepper-label-header-height;
-  align-items: center;
-  justify-content: center;
-  display: flex;
   flex-shrink: 0;
+  position: relative;
+}
+
+.mat-step-icon-content {
+  // Use absolute positioning to center the content, because it works better with text.
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .mat-step-icon .mat-icon {