[StepIcon] Fix text centering when changing browser font size (#32706)

mui · Jun 8, 2022 · 9b19d91 · 9b19d91
1 parent 783499b
commit 9b19d91
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/packages/mui-material/src/StepIcon/StepIcon.js b/packages/mui-material/src/StepIcon/StepIcon.js
@@ -98,8 +98,9 @@ const StepIcon = React.forwardRef(function StepIcon(inProps, ref) {
         <StepIconText
           className={classes.text}
           x="12"
-          y="16"
+          y="12"
           textAnchor="middle"
+          dominantBaseline="central"
           ownerState={ownerState}
         >
           {icon}

diff --git a/test/regressions/fixtures/StepIcon/BiggerStepIconREM.js b/test/regressions/fixtures/StepIcon/BiggerStepIconREM.js
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import StepIcon from '@mui/material/StepIcon';
+import GlobalStyles from '@mui/material/GlobalStyles';
+
+export default function BiggerStepIconREM() {
+  return (
+    <React.Fragment>
+      <GlobalStyles
+        styles={{
+          html: { fontSize: '24px' },
+        }}
+      />
+      <StepIcon completed icon={1} />
+      <StepIcon icon={2} />
+    </React.Fragment>
+  );
+}