[StepIcon] Fix text centering when changing browser font size

README.md

@@ -103,6 +103,7 @@ Visit our [`styled-engine` guide](https://mui.com/material-ui/guides/styled-engi
 <p align="center">
   <a href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/1287123?s=256" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
   <a href="https://www.doit-intl.com/flexsave/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/8424863?s=256" alt="doit-intl" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
+  <a href="https://www.zesty.io/integrations/nextjs-cms/?utm_source=mui&utm_medium=referral&utm_campaign=sponsor" rel="noopener sponsored" target="_blank"><img height="90" width="90" src="https://brand.zesty.io/zesty-io-logo.svg" alt="zesty.io" title="The only Next.js CMS you need" loading="lazy" /></a>
 </p>
 
 Diamond Sponsors are those who have pledged \$1,500/month or more to MUI.
@@ -202,7 +203,7 @@ GitHub lets us host the Git repository and coordinate contributions.
 
 Netlify lets us distribute the documentation.
 
-[<img loading="lazy" alt="CrowdIn" src="https://support.crowdin.com/assets/logos/crowdin-logo1-small.png" height="30">](https://crowdin.com/)
+[<img loading="lazy" alt="Crowdin" src="https://support.crowdin.com/assets/logos/crowdin-logo-small-black.svg" height="30">](https://crowdin.com/)
 
 Crowdin lets us translate the documentation.
 

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}

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>
+  );
+}