diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.js b/packages/mui-material/src/FormHelperText/FormHelperText.js
index 3a6abb0483b814..71ca04e248e48f 100644
--- a/packages/mui-material/src/FormHelperText/FormHelperText.js
+++ b/packages/mui-material/src/FormHelperText/FormHelperText.js
@@ -111,8 +111,7 @@ const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) {
     >
       {children === ' ' ? (
         // notranslate needed while Google Translate will not fix zero-width space issue
-        // eslint-disable-next-line react/no-danger
-        <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+        <span className="notranslate">&#8203;</span>
       ) : (
         children
       )}
diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.js b/packages/mui-material/src/InputAdornment/InputAdornment.js
index 239da4af033e74..b99572dd262e22 100644
--- a/packages/mui-material/src/InputAdornment/InputAdornment.js
+++ b/packages/mui-material/src/InputAdornment/InputAdornment.js
@@ -127,8 +127,7 @@ const InputAdornment = React.forwardRef(function InputAdornment(inProps, ref) {
             {/* To have the correct vertical alignment baseline */}
             {position === 'start' ? (
               /* notranslate needed while Google Translate will not fix zero-width space issue */
-              /* eslint-disable-next-line react/no-danger */
-              <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+              <span className="notranslate">&#8203;</span>
             ) : null}
             {children}
           </React.Fragment>
diff --git a/packages/mui-material/src/OutlinedInput/NotchedOutline.js b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
index 9a92c04c2fc7ba..13ce724a0fbabd 100644
--- a/packages/mui-material/src/OutlinedInput/NotchedOutline.js
+++ b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
@@ -76,8 +76,7 @@ export default function NotchedOutline(props) {
           <span>{label}</span>
         ) : (
           // notranslate needed while Google Translate will not fix zero-width space issue
-          // eslint-disable-next-line react/no-danger
-          <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+          <span className="notranslate">&#8203;</span>
         )}
       </NotchedOutlineLegend>
     </NotchedOutlineRoot>
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index 722c459631b691..0c6746f5b42e49 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -499,8 +499,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         {/* So the vertical align positioning algorithm kicks in. */}
         {isEmpty(display) ? (
           // notranslate needed while Google Translate will not fix zero-width space issue
-          // eslint-disable-next-line react/no-danger
-          <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+          <span className="notranslate">&#8203;</span>
         ) : (
           display
         )}