From c489c709607fde5eaa26ea1e57635b87ac696bc1 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 23 Dec 2021 12:14:24 +0200 Subject: [PATCH] fix(material/stepper): icon not centered in header if direction changes 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. --- src/material/stepper/step-header.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss index fde2dce109ac..a8387279b2e1 100644 --- a/src/material/stepper/step-header.scss +++ b/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 {