diff --git a/src/lib/stepper/step-header.html b/src/lib/stepper/step-header.html
index 0d918a394700..a07f3baa4269 100644
--- a/src/lib/stepper/step-header.html
+++ b/src/lib/stepper/step-header.html
@@ -1,12 +1,12 @@
 <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"
+<div class="mat-step-icon-state-{{state}} mat-step-icon mat-step-icon-content" [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>
+    <span *ngSwitchDefault>{{index + 1}}</span>
   </ng-container>
 
   <ng-container *ngSwitchCase="'edit'" [ngSwitch]="!!(iconOverrides && iconOverrides.edit)">
@@ -14,7 +14,7 @@
       *ngSwitchCase="true"
       [ngTemplateOutlet]="iconOverrides.edit"
       [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-    <mat-icon class="mat-step-icon-content" *ngSwitchDefault>create</mat-icon>
+    <mat-icon *ngSwitchDefault>create</mat-icon>
   </ng-container>
 
   <ng-container *ngSwitchCase="'done'" [ngSwitch]="!!(iconOverrides && iconOverrides.done)">
@@ -22,7 +22,7 @@
       *ngSwitchCase="true"
       [ngTemplateOutlet]="iconOverrides.done"
       [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-    <mat-icon class="mat-step-icon-content" *ngSwitchDefault>done</mat-icon>
+    <mat-icon *ngSwitchDefault>done</mat-icon>
   </ng-container>
 
   <ng-container *ngSwitchCase="'error'" [ngSwitch]="!!(iconOverrides && iconOverrides.error)">
diff --git a/src/lib/stepper/step-header.scss b/src/lib/stepper/step-header.scss
index 228160732d6e..12a520aef500 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-icon,
+.mat-step-icon-content span {
   // Use absolute positioning to center the content, because it works better with text.
   position: absolute;
   top: 50%;