diff --git a/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
new file mode 100644
index 00000000000000..a5a646c5635606
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
@@ -0,0 +1,72 @@
+'use client';
+import * as React from 'react';
+import CreateSvgIcon from '../../../../../../docs/data/material/components/icons/CreateSvgIcon';
+import FontAwesomeIcon from '../../../../../../docs/data/material/components/icons/FontAwesomeIcon';
+import FontAwesomeIconSize from '../../../../../../docs/data/material/components/icons/FontAwesomeIconSize';
+import FontAwesomeSvgIconDemo from '../../../../../../docs/data/material/components/icons/FontAwesomeSvgIconDemo';
+import Icons from '../../../../../../docs/data/material/components/icons/Icons';
+import SvgIconChildren from '../../../../../../docs/data/material/components/icons/SvgIconChildren';
+import SvgIconsColor from '../../../../../../docs/data/material/components/icons/SvgIconsColor';
+import SvgIconsSize from '../../../../../../docs/data/material/components/icons/SvgIconsSize';
+import SvgMaterialIcons from '../../../../../../docs/data/material/components/icons/SvgMaterialIcons';
+
+export default function IconsPage() {
+ return (
+
+
+ Create Svg Icon
+
+
+
+
+
+ Font Awesome Icon
+
+
+
+
+
+ Font Awesome Icon Size
+
+
+
+
+
+ Font Awesome Svg Icon Demo
+
+
+
+
+
+
+ Svg Icon Children
+
+
+
+
+
+ Svg Icons Color
+
+
+
+
+
+
+ Svg Material Icons
+
+
+
+
+
+ );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx
new file mode 100644
index 00000000000000..0839fd022f0bc9
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import CreateSvgIcon from '../../../../../docs/data/material/components/icons/CreateSvgIcon.tsx';
+import FontAwesomeIcon from '../../../../../docs/data/material/components/icons/FontAwesomeIcon.tsx';
+import FontAwesomeIconSize from '../../../../../docs/data/material/components/icons/FontAwesomeIconSize.tsx';
+import FontAwesomeSvgIconDemo from '../../../../../docs/data/material/components/icons/FontAwesomeSvgIconDemo.tsx';
+import Icons from '../../../../../docs/data/material/components/icons/Icons.tsx';
+import SvgIconChildren from '../../../../../docs/data/material/components/icons/SvgIconChildren.tsx';
+import SvgIconsColor from '../../../../../docs/data/material/components/icons/SvgIconsColor.tsx';
+import SvgIconsSize from '../../../../../docs/data/material/components/icons/SvgIconsSize.tsx';
+import SvgMaterialIcons from '../../../../../docs/data/material/components/icons/SvgMaterialIcons.tsx';
+
+export default function IconsPage() {
+ return (
+
+ Icons
+
+ Create Svg Icon
+
+
+
+
+
+ Font Awesome Icon
+
+
+
+
+
+ Font Awesome Icon Size
+
+
+
+
+
+ Font Awesome Svg Icon Demo
+
+
+
+
+
+
+ Svg Icon Children
+
+
+
+
+
+ Svg Icons Color
+
+
+
+
+
+
+ Svg Material Icons
+
+
+
+
+
+ );
+}
diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.js b/packages/mui-material/src/SvgIcon/SvgIcon.js
index e99c51e720f9a9..37774cfad0e027 100644
--- a/packages/mui-material/src/SvgIcon/SvgIcon.js
+++ b/packages/mui-material/src/SvgIcon/SvgIcon.js
@@ -4,10 +4,11 @@ import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
import { getSvgIconUtilityClass } from './svgIconClasses';
+const useThemeProps = createUseThemeProps('MuiSvgIcon');
+
const useUtilityClasses = (ownerState) => {
const { color, fontSize, classes } = ownerState;
@@ -34,32 +35,60 @@ const SvgIconRoot = styled('svg', {
styles[`fontSize${capitalize(ownerState.fontSize)}`],
];
},
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
userSelect: 'none',
width: '1em',
height: '1em',
display: 'inline-block',
- // the