fix(material/stepper): icon not centered in header if direction chang…

…es (#24131)

Fixes that the icon in the step header was being rendered outside of the circle of the page direction changes. This seems to be a browser rendering issue due to the fact that we were applying a `position: absolute` and a `transform` both on the icon and its parent. Since this is unnecessary, I've removed the styles from the icon and added an extra `display: flex` to fix the centering.

Fixes #24046.

(cherry picked from commit 2d571af)

src/material/stepper/step-header.scss

@@ -37,13 +37,16 @@
   position: relative;
 }
 
-.mat-step-icon-content,
-.mat-step-icon .mat-icon {
+.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%);
+
+  // We aren't using any flex features here, but using the `display: flex` prevents
+  // the browser from adding extra whitespace at the bottom of the element.
+  display: flex;
 }
 
 .mat-step-icon .mat-icon {