diff --git a/docs/data/material/components/icons/CreateSvgIcon.js b/docs/data/material/components/icons/CreateSvgIcon.js
index fcea59053c9594..ec540e8058cd14 100644
--- a/docs/data/material/components/icons/CreateSvgIcon.js
+++ b/docs/data/material/components/icons/CreateSvgIcon.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { createSvgIcon } from '@mui/material/utils';
 
 const HomeIcon = createSvgIcon(
@@ -23,17 +23,11 @@ const PlusIcon = createSvgIcon(
 
 export default function CreateSvgIcon() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <HomeIcon />
       <HomeIcon color="primary" />
       <PlusIcon />
       <PlusIcon color="secondary" />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/CreateSvgIcon.tsx b/docs/data/material/components/icons/CreateSvgIcon.tsx
index fcea59053c9594..ec540e8058cd14 100644
--- a/docs/data/material/components/icons/CreateSvgIcon.tsx
+++ b/docs/data/material/components/icons/CreateSvgIcon.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { createSvgIcon } from '@mui/material/utils';
 
 const HomeIcon = createSvgIcon(
@@ -23,17 +23,11 @@ const PlusIcon = createSvgIcon(
 
 export default function CreateSvgIcon() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <HomeIcon />
       <HomeIcon color="primary" />
       <PlusIcon />
       <PlusIcon color="secondary" />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeIcon.js b/docs/data/material/components/icons/FontAwesomeIcon.js
index 74582f474d10e9..f0cc681d9def22 100644
--- a/docs/data/material/components/icons/FontAwesomeIcon.js
+++ b/docs/data/material/components/icons/FontAwesomeIcon.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { green } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 
@@ -18,13 +18,7 @@ export default function FontAwesomeIcon() {
   }, []);
 
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={4} alignItems="flex-end">
       <Icon baseClassName="fas" className="fa-plus-circle" />
       <Icon baseClassName="fas" className="fa-plus-circle" color="primary" />
       <Icon
@@ -34,6 +28,6 @@ export default function FontAwesomeIcon() {
       />
       <Icon baseClassName="fas" className="fa-plus-circle" fontSize="small" />
       <Icon baseClassName="fas" className="fa-plus-circle" sx={{ fontSize: 30 }} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeIcon.tsx b/docs/data/material/components/icons/FontAwesomeIcon.tsx
index 086d8cc886d93a..121a0c1ddab0b4 100644
--- a/docs/data/material/components/icons/FontAwesomeIcon.tsx
+++ b/docs/data/material/components/icons/FontAwesomeIcon.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { green } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 
@@ -18,13 +18,7 @@ export default function FontAwesomeIcon() {
   }, []);
 
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={4} alignItems="flex-end">
       <Icon baseClassName="fas" className="fa-plus-circle" />
       <Icon baseClassName="fas" className="fa-plus-circle" color="primary" />
       <Icon
@@ -34,6 +28,6 @@ export default function FontAwesomeIcon() {
       />
       <Icon baseClassName="fas" className="fa-plus-circle" fontSize="small" />
       <Icon baseClassName="fas" className="fa-plus-circle" sx={{ fontSize: 30 }} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeIconSize.js b/docs/data/material/components/icons/FontAwesomeIconSize.js
index d7c8f73b2006d4..7aa4e5fcc5e49c 100644
--- a/docs/data/material/components/icons/FontAwesomeIconSize.js
+++ b/docs/data/material/components/icons/FontAwesomeIconSize.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Icon from '@mui/material/Icon';
 import MdPhone from '@mui/icons-material/Phone';
 import Chip from '@mui/material/Chip';
@@ -35,17 +35,11 @@ export default function FontAwesomeIconSize() {
   }, []);
 
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={2}>
       <ThemeProvider theme={theme}>
         <Chip icon={<MdPhone />} label="Call me" />
         <Chip icon={<Icon className="fas fa-phone-alt" />} label="Call me" />
       </ThemeProvider>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeIconSize.tsx b/docs/data/material/components/icons/FontAwesomeIconSize.tsx
index 52b46aa319bbe2..a074fe9d889200 100644
--- a/docs/data/material/components/icons/FontAwesomeIconSize.tsx
+++ b/docs/data/material/components/icons/FontAwesomeIconSize.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Icon from '@mui/material/Icon';
 import MdPhone from '@mui/icons-material/Phone';
 import Chip from '@mui/material/Chip';
@@ -35,17 +35,11 @@ export default function FontAwesomeIconSize() {
   }, []);
 
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={2}>
       <ThemeProvider theme={theme}>
         <Chip icon={<MdPhone />} label="Call me" />
         <Chip icon={<Icon className="fas fa-phone-alt" />} label="Call me" />
       </ThemeProvider>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeSvgIconDemo.js b/docs/data/material/components/icons/FontAwesomeSvgIconDemo.js
index f4cd9b88b6db9f..06824b5ca00cd2 100644
--- a/docs/data/material/components/icons/FontAwesomeSvgIconDemo.js
+++ b/docs/data/material/components/icons/FontAwesomeSvgIconDemo.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
 import { faInfo } from '@fortawesome/free-solid-svg-icons/faInfo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import SvgIcon from '@mui/material/SvgIcon';
@@ -41,13 +41,7 @@ FontAwesomeSvgIcon.propTypes = {
 
 export default function FontAwesomeSvgIconDemo() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={2}>
       <IconButton aria-label="Example">
         <FontAwesomeIcon icon={faEllipsisV} />
       </IconButton>
@@ -60,6 +54,6 @@ export default function FontAwesomeSvgIconDemo() {
       <Button variant="contained" startIcon={<FontAwesomeSvgIcon icon={faInfo} />}>
         Example
       </Button>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeSvgIconDemo.tsx b/docs/data/material/components/icons/FontAwesomeSvgIconDemo.tsx
index 580c90f9473691..7c631d9c9e15b9 100644
--- a/docs/data/material/components/icons/FontAwesomeSvgIconDemo.tsx
+++ b/docs/data/material/components/icons/FontAwesomeSvgIconDemo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
 import { faInfo } from '@fortawesome/free-solid-svg-icons/faInfo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import SvgIcon from '@mui/material/SvgIcon';
@@ -42,13 +42,7 @@ const FontAwesomeSvgIcon = React.forwardRef<SVGSVGElement, FontAwesomeSvgIconPro
 
 export default function FontAwesomeSvgIconDemo() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={2}>
       <IconButton aria-label="Example">
         <FontAwesomeIcon icon={faEllipsisV} />
       </IconButton>
@@ -61,6 +55,6 @@ export default function FontAwesomeSvgIconDemo() {
       <Button variant="contained" startIcon={<FontAwesomeSvgIcon icon={faInfo} />}>
         Example
       </Button>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/Icons.js b/docs/data/material/components/icons/Icons.js
index e7381e6e23065d..d896873a8358fd 100644
--- a/docs/data/material/components/icons/Icons.js
+++ b/docs/data/material/components/icons/Icons.js
@@ -1,22 +1,16 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { green } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 
 export default function Icons() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <Icon>add_circle</Icon>
       <Icon color="primary">add_circle</Icon>
       <Icon sx={{ color: green[500] }}>add_circle</Icon>
       <Icon fontSize="small">add_circle</Icon>
       <Icon sx={{ fontSize: 30 }}>add_circle</Icon>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/Icons.tsx b/docs/data/material/components/icons/Icons.tsx
index e7381e6e23065d..d896873a8358fd 100644
--- a/docs/data/material/components/icons/Icons.tsx
+++ b/docs/data/material/components/icons/Icons.tsx
@@ -1,22 +1,16 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { green } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 
 export default function Icons() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <Icon>add_circle</Icon>
       <Icon color="primary">add_circle</Icon>
       <Icon sx={{ color: green[500] }}>add_circle</Icon>
       <Icon fontSize="small">add_circle</Icon>
       <Icon sx={{ fontSize: 30 }}>add_circle</Icon>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/SvgIconsColor.js b/docs/data/material/components/icons/SvgIconsColor.js
index 23276a81af602c..8ce08b8f04520d 100644
--- a/docs/data/material/components/icons/SvgIconsColor.js
+++ b/docs/data/material/components/icons/SvgIconsColor.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { pink } from '@mui/material/colors';
 import SvgIcon from '@mui/material/SvgIcon';
 
@@ -13,13 +13,7 @@ function HomeIcon(props) {
 
 export default function SvgIconsColor() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <HomeIcon />
       <HomeIcon color="primary" />
       <HomeIcon color="secondary" />
@@ -27,6 +21,6 @@ export default function SvgIconsColor() {
       <HomeIcon color="action" />
       <HomeIcon color="disabled" />
       <HomeIcon sx={{ color: pink[500] }} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/SvgIconsColor.tsx b/docs/data/material/components/icons/SvgIconsColor.tsx
index 65eb8b31d8812b..8afc0faca5f04f 100644
--- a/docs/data/material/components/icons/SvgIconsColor.tsx
+++ b/docs/data/material/components/icons/SvgIconsColor.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { pink } from '@mui/material/colors';
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
@@ -13,13 +13,7 @@ function HomeIcon(props: SvgIconProps) {
 
 export default function SvgIconsColor() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <HomeIcon />
       <HomeIcon color="primary" />
       <HomeIcon color="secondary" />
@@ -27,6 +21,6 @@ export default function SvgIconsColor() {
       <HomeIcon color="action" />
       <HomeIcon color="disabled" />
       <HomeIcon sx={{ color: pink[500] }} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/SvgIconsSize.js b/docs/data/material/components/icons/SvgIconsSize.js
index a7b0ea3b1e3089..e32dbb810632ba 100644
--- a/docs/data/material/components/icons/SvgIconsSize.js
+++ b/docs/data/material/components/icons/SvgIconsSize.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import SvgIcon from '@mui/material/SvgIcon';
 
 function HomeIcon(props) {
@@ -12,17 +12,11 @@ function HomeIcon(props) {
 
 export default function SvgIconsSize() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3} alignItems="flex-end">
       <HomeIcon fontSize="small" />
       <HomeIcon />
       <HomeIcon fontSize="large" />
       <HomeIcon sx={{ fontSize: 40 }} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/SvgIconsSize.tsx b/docs/data/material/components/icons/SvgIconsSize.tsx
index f7592b4c4ab0df..efebb2e816dbca 100644
--- a/docs/data/material/components/icons/SvgIconsSize.tsx
+++ b/docs/data/material/components/icons/SvgIconsSize.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
 function HomeIcon(props: SvgIconProps) {
@@ -12,17 +12,11 @@ function HomeIcon(props: SvgIconProps) {
 
 export default function SvgIconsSize() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3} alignItems="flex-end">
       <HomeIcon fontSize="small" />
       <HomeIcon />
       <HomeIcon fontSize="large" />
       <HomeIcon sx={{ fontSize: 40 }} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/text-fields/FormattedInputs.js b/docs/data/material/components/text-fields/FormattedInputs.js
index df3ecf6b009767..96f41bdb7a787f 100644
--- a/docs/data/material/components/text-fields/FormattedInputs.js
+++ b/docs/data/material/components/text-fields/FormattedInputs.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { IMaskInput } from 'react-imask';
 import { NumericFormat } from 'react-number-format';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Input from '@mui/material/Input';
 import InputLabel from '@mui/material/InputLabel';
 import TextField from '@mui/material/TextField';
@@ -73,13 +73,7 @@ export default function FormattedInputs() {
   };
 
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={2}>
       <FormControl variant="standard">
         <InputLabel htmlFor="formatted-text-mask-input">react-imask</InputLabel>
         <Input
@@ -101,6 +95,6 @@ export default function FormattedInputs() {
         }}
         variant="standard"
       />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/text-fields/FormattedInputs.tsx b/docs/data/material/components/text-fields/FormattedInputs.tsx
index 5fca17af2a5cc2..f14a821f121e7f 100644
--- a/docs/data/material/components/text-fields/FormattedInputs.tsx
+++ b/docs/data/material/components/text-fields/FormattedInputs.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IMaskInput } from 'react-imask';
 import { NumericFormat, NumericFormatProps } from 'react-number-format';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Input from '@mui/material/Input';
 import InputLabel from '@mui/material/InputLabel';
 import TextField from '@mui/material/TextField';
@@ -68,13 +68,7 @@ export default function FormattedInputs() {
   };
 
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={2}>
       <FormControl variant="standard">
         <InputLabel htmlFor="formatted-text-mask-input">react-imask</InputLabel>
         <Input
@@ -96,6 +90,6 @@ export default function FormattedInputs() {
         }}
         variant="standard"
       />
-    </Box>
+    </Stack>
   );
 }