diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index cff1e590be9904..6b395d8ebe8487 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -9,6 +9,7 @@
     "packages/mui-base",
     "packages/mui-codemod",
     "packages/mui-core-downloads-tracker",
+    "packages/mui-docs",
     "packages/mui-icons-material",
     "packages/mui-joy",
     "packages/mui-lab",
@@ -28,6 +29,7 @@
     "@mui/base": "packages/mui-base/build",
     "@mui/codemod": "packages/mui-codemod/build",
     "@mui/core-downloads-tracker": "packages/mui-core-downloads-tracker/build",
+    "@mui/docs": "packages/mui-docs/build",
     "@mui/icons-material": "packages/mui-icons-material/build",
     "@mui/internal-babel-macros": "packages/mui-babel-macros",
     "@mui/internal-markdown": "packages/markdown",
diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
index c04116d1174cfc..ccd8821e10f1d1 100644
--- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
+++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
@@ -10,7 +10,7 @@ export default function TransitionComponentSnackbar() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
index 36e003cd345db8..93f36426d306cc 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
@@ -11,7 +11,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx
index d73eb6c45eea53..b4fed03c2a230f 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx
@@ -11,7 +11,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx
index e34bf3d5c5c45f..f36868dd2de782 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }
diff --git a/docs/data/joy/integrations/icon-libraries/IconFontSizes.js b/docs/data/joy/integrations/icon-libraries/IconFontSizes.js
index b8bcc044becadb..72a86184653993 100644
--- a/docs/data/joy/integrations/icon-libraries/IconFontSizes.js
+++ b/docs/data/joy/integrations/icon-libraries/IconFontSizes.js
@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { useTheme } from '@mui/joy/styles';
 import Stack from '@mui/joy/Stack';
 import Person from '@mui/icons-material/Person';
 
 export default function IconFontSizes() {
-  const theme = useTheme();
   return (
     <Stack
       spacing={2}
       direction="row"
       sx={{ gridColumn: '1 / -1', alignItems: 'center', justifyContent: 'center' }}
     >
-      {Object.keys(theme.fontSize).map((size) => (
-        <Person key={size} fontSize={size} />
-      ))}
+      <Person fontSize="xs" />
+      <Person fontSize="sm" />
+      <Person fontSize="md" />
+      <Person fontSize="lg" />
+      <Person fontSize="xl" />
+      <Person fontSize="xl2" />
+      <Person fontSize="xl3" />
+      <Person fontSize="xl4" />
     </Stack>
   );
 }
diff --git a/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx b/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx
index b8bcc044becadb..72a86184653993 100644
--- a/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx
+++ b/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx
@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { useTheme } from '@mui/joy/styles';
 import Stack from '@mui/joy/Stack';
 import Person from '@mui/icons-material/Person';
 
 export default function IconFontSizes() {
-  const theme = useTheme();
   return (
     <Stack
       spacing={2}
       direction="row"
       sx={{ gridColumn: '1 / -1', alignItems: 'center', justifyContent: 'center' }}
     >
-      {Object.keys(theme.fontSize).map((size) => (
-        <Person key={size} fontSize={size} />
-      ))}
+      <Person fontSize="xs" />
+      <Person fontSize="sm" />
+      <Person fontSize="md" />
+      <Person fontSize="lg" />
+      <Person fontSize="xl" />
+      <Person fontSize="xl2" />
+      <Person fontSize="xl3" />
+      <Person fontSize="xl4" />
     </Stack>
   );
 }
diff --git a/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx.preview b/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx.preview
index a94d346b70bd0c..bccdfe423278bf 100644
--- a/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx.preview
+++ b/docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx.preview
@@ -1,3 +1,8 @@
-{Object.keys(theme.fontSize).map((size) => (
-  <Person key={size} fontSize={size} />
-))}
\ No newline at end of file
+<Person fontSize="xs" />
+<Person fontSize="sm" />
+<Person fontSize="md" />
+<Person fontSize="lg" />
+<Person fontSize="xl" />
+<Person fontSize="xl2" />
+<Person fontSize="xl3" />
+<Person fontSize="xl4" />
\ No newline at end of file
diff --git a/docs/pages/experiments/base/components-gallery.tsx b/docs/pages/experiments/base/components-gallery.tsx
index 084ce223ad1511..94c04408330fb0 100644
--- a/docs/pages/experiments/base/components-gallery.tsx
+++ b/docs/pages/experiments/base/components-gallery.tsx
@@ -143,7 +143,7 @@ export default function ComponentsGallery() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }
@@ -208,7 +208,7 @@ export default function ComponentsGallery() {
     setCopySnackbarOpen(true);
   }
 
-  const handleCopyClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleCopyClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }
diff --git a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
index b8d24d54b97e9d..040742e06aa145 100644
--- a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
+++ b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
@@ -785,7 +785,7 @@ export default function BaseUIThemesDemo() {
   // Snackbar
   const [openSnackbar, setOpenSnackbar] = React.useState(false);
 
-  const handleCloseSnackbar = (_: any, reason: SnackbarCloseReason) => {
+  const handleCloseSnackbar = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }
diff --git a/docs/src/components/showcase/TaskCard.tsx b/docs/src/components/showcase/TaskCard.tsx
index 304e9e65788b54..d437f7a6f6b217 100644
--- a/docs/src/components/showcase/TaskCard.tsx
+++ b/docs/src/components/showcase/TaskCard.tsx
@@ -33,7 +33,7 @@ export default function TaskCard() {
           </Typography>
         </Box>
         <Box sx={{ my: 'auto' }}>
-          <CodeRounded color="white" />
+          <CodeRounded />
           <Typography fontSize={18} component="div" fontWeight="semiBold" sx={{ lineHeight: 1.4 }}>
             Customize every button and chip instance primary color
           </Typography>
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index ae02ed72e32070..3fba71c44d36fa 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -65,6 +65,22 @@ declare module '@mui/material/Chip' {
   }
 }
 
+declare module '@mui/material/SvgIcon' {
+  interface SvgIconPropsColorOverrides {
+    danger: true;
+  }
+  interface SvgIconPropsSizeOverrides {
+    xs: true;
+    sm: true;
+    md: true;
+    lg: true;
+    xl: true;
+    xl2: true;
+    xl3: true;
+    xl4: true;
+  }
+}
+
 // TODO: enable this once types conflict is fixed
 // declare module '@mui/material/Button' {
 //   interface ButtonPropsVariantOverrides {
diff --git a/packages/mui-icons-material/src/icon.d.ts b/packages/mui-icons-material/src/icon.d.ts
new file mode 100644
index 00000000000000..72c99eef1a4c82
--- /dev/null
+++ b/packages/mui-icons-material/src/icon.d.ts
@@ -0,0 +1 @@
+export { default } from '@mui/material/SvgIcon';
diff --git a/packages/mui-icons-material/tsconfig.json b/packages/mui-icons-material/tsconfig.json
index f762d7e08aeb2f..73a65ef2ef6e56 100644
--- a/packages/mui-icons-material/tsconfig.json
+++ b/packages/mui-icons-material/tsconfig.json
@@ -1,10 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@mui/material": ["../mui-material/src"],
-      "@mui/material/*": ["../mui-material/src/*"]
-    }
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }
diff --git a/packages/mui-material/src/Alert/Alert.spec.tsx b/packages/mui-material/src/Alert/Alert.spec.tsx
index dbfeb1222427a0..349694b19f9ba4 100644
--- a/packages/mui-material/src/Alert/Alert.spec.tsx
+++ b/packages/mui-material/src/Alert/Alert.spec.tsx
@@ -1,4 +1,4 @@
-import { CloseRounded } from '@mui/icons-material';
+import CloseRounded from '@mui/icons-material/CloseRounded';
 import { createTheme } from '@mui/material';
 
 createTheme({
diff --git a/tsconfig.json b/tsconfig.json
index 2805977e8c472f..94f8dff28f53c3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -43,8 +43,7 @@
       "@mui/material-nextjs/*": ["./packages/mui-material-nextjs/src/*"],
       "@mui/joy": ["./packages/mui-joy/src"],
       "@mui/joy/*": ["./packages/mui-joy/src/*"],
-      "@mui/icons-material": ["./packages/mui-icons-material/lib"],
-      "@mui/icons-material/*": ["./packages/mui-icons-material/lib/*"],
+      "@mui/icons-material/*": ["./packages/mui-icons-material/src/icon.d.ts"],
       "@pigment-css/nextjs-plugin": ["./packages/pigment-nextjs-plugin/src"],
       "@pigment-css/nextjs-plugin/*": ["./packages/pigment-nextjs-plugin/src/*"],
       "@pigment-css/react": ["./packages/pigment-react/src"],