diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt
index 5567c5d4077c44..ac279e3a2d90ed 100644
--- a/docs/.link-check-errors.txt
+++ b/docs/.link-check-errors.txt
@@ -2,4 +2,5 @@ Broken links found by `pnpm docs:link-check` that exist:
 
 - https://mui.com/blog/material-ui-v4-is-out/#premium-themes-store-✨
 - https://mui.com/material-ui/discover-more/roadmap/#priorities
+- https://mui.com/material-ui/icons/#svgicon/
 - https://mui.com/size-snapshot/
diff --git a/docs/data/material/components/material-icons/BasicMaterialIcon.js b/docs/data/material/components/material-icons/BasicMaterialIcon.js
new file mode 100644
index 00000000000000..f3e75d01dfbfa2
--- /dev/null
+++ b/docs/data/material/components/material-icons/BasicMaterialIcon.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import AcUnitIcon from '@mui/icons-material/AcUnit';
+import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
+import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
+
+export default function BasicMaterialIcon() {
+  return (
+    <Stack spacing={2} direction="row" useFlexGap>
+      <AcUnitIcon />
+      <AccountBalanceIcon />
+      <AddAPhotoIcon />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/material-icons/BasicMaterialIcon.tsx b/docs/data/material/components/material-icons/BasicMaterialIcon.tsx
new file mode 100644
index 00000000000000..f3e75d01dfbfa2
--- /dev/null
+++ b/docs/data/material/components/material-icons/BasicMaterialIcon.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import AcUnitIcon from '@mui/icons-material/AcUnit';
+import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
+import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
+
+export default function BasicMaterialIcon() {
+  return (
+    <Stack spacing={2} direction="row" useFlexGap>
+      <AcUnitIcon />
+      <AccountBalanceIcon />
+      <AddAPhotoIcon />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/material-icons/BasicMaterialIcon.tsx.preview b/docs/data/material/components/material-icons/BasicMaterialIcon.tsx.preview
new file mode 100644
index 00000000000000..56b428a450d2cc
--- /dev/null
+++ b/docs/data/material/components/material-icons/BasicMaterialIcon.tsx.preview
@@ -0,0 +1,3 @@
+<AcUnitIcon />
+<AccountBalanceIcon />
+<AddAPhotoIcon />
\ No newline at end of file
diff --git a/docs/data/material/components/material-icons/ColorMaterialIcon.js b/docs/data/material/components/material-icons/ColorMaterialIcon.js
new file mode 100644
index 00000000000000..b0db0effd534f2
--- /dev/null
+++ b/docs/data/material/components/material-icons/ColorMaterialIcon.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import AcUnitIcon from '@mui/icons-material/AcUnit';
+
+export default function ColorMaterialIcon() {
+  return (
+    <Stack spacing={2} direction="row" useFlexGap>
+      <AcUnitIcon color="primary" />
+      <AcUnitIcon color="secondary" />
+      <AcUnitIcon color="success" />
+      <AcUnitIcon color="warning" />
+      <AcUnitIcon color="error" />
+      <AcUnitIcon color="info" />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/material-icons/ColorMaterialIcon.tsx b/docs/data/material/components/material-icons/ColorMaterialIcon.tsx
new file mode 100644
index 00000000000000..b0db0effd534f2
--- /dev/null
+++ b/docs/data/material/components/material-icons/ColorMaterialIcon.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import AcUnitIcon from '@mui/icons-material/AcUnit';
+
+export default function ColorMaterialIcon() {
+  return (
+    <Stack spacing={2} direction="row" useFlexGap>
+      <AcUnitIcon color="primary" />
+      <AcUnitIcon color="secondary" />
+      <AcUnitIcon color="success" />
+      <AcUnitIcon color="warning" />
+      <AcUnitIcon color="error" />
+      <AcUnitIcon color="info" />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/material-icons/ColorMaterialIcon.tsx.preview b/docs/data/material/components/material-icons/ColorMaterialIcon.tsx.preview
new file mode 100644
index 00000000000000..a9c2f9063aef57
--- /dev/null
+++ b/docs/data/material/components/material-icons/ColorMaterialIcon.tsx.preview
@@ -0,0 +1,6 @@
+<AcUnitIcon color="primary" />
+<AcUnitIcon color="secondary" />
+<AcUnitIcon color="success" />
+<AcUnitIcon color="warning" />
+<AcUnitIcon color="error" />
+<AcUnitIcon color="info" />
\ No newline at end of file
diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
index 294873ed691edf..59cfe789f8c71c 100644
--- a/docs/data/material/components/material-icons/SearchIcons.js
+++ b/docs/data/material/components/material-icons/SearchIcons.js
@@ -211,7 +211,6 @@ const Title = styled(Typography)(({ theme }) => ({
 
 const CanvasComponent = styled(Box)(({ theme }) => ({
   fontSize: 210,
-  marginTop: theme.spacing(2),
   color: theme.palette.text.primary,
   backgroundSize: '30px 30px',
   backgroundColor: 'transparent',
@@ -271,7 +270,20 @@ const DialogDetails = React.memo(function DialogDetails(props) {
   };
 
   return (
-    <Dialog fullWidth maxWidth="sm" open={open} onClose={handleClose}>
+    <Dialog
+      fullWidth
+      maxWidth="sm"
+      open={open}
+      onClose={handleClose}
+      sx={{
+        '& .MuiDialog-paper': {
+          borderRadius: 2.5,
+          backgroundImage: 'none',
+          border: '1px solid',
+          borderColor: 'divider',
+        },
+      }}
+    >
       {selectedIcon ? (
         <React.Fragment>
           <DialogTitle>
@@ -370,7 +382,7 @@ const DialogDetails = React.memo(function DialogDetails(props) {
               </Grid>
             </Grid>
           </DialogContent>
-          <DialogActions>
+          <DialogActions sx={{ borderTop: '1px solid', borderColor: 'divider' }}>
             <Button onClick={handleClose}>{t('close')}</Button>
           </DialogActions>
         </React.Fragment>
@@ -524,7 +536,7 @@ export default function SearchIcons() {
   );
 
   return (
-    <Grid container sx={{ minHeight: 500, my: 2 }}>
+    <Grid container sx={{ minHeight: 500 }}>
       <Grid item xs={12} sm={3}>
         <Form>
           <Typography fontWeight={500} sx={{ mb: 1 }}>
diff --git a/docs/data/material/components/material-icons/SizeMaterialIcon.js b/docs/data/material/components/material-icons/SizeMaterialIcon.js
new file mode 100644
index 00000000000000..a5a9aa734b7a25
--- /dev/null
+++ b/docs/data/material/components/material-icons/SizeMaterialIcon.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import AcUnitIcon from '@mui/icons-material/AcUnit';
+import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
+import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
+
+export default function SizeMaterialIcon() {
+  return (
+    <Stack spacing={2} direction="row" useFlexGap alignItems="center">
+      <AddAPhotoIcon sx={{ fontSize: 10 }} />
+      <AcUnitIcon fontSize="small" />
+      <AccountBalanceIcon fontSize="large" />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/material-icons/SizeMaterialIcon.tsx b/docs/data/material/components/material-icons/SizeMaterialIcon.tsx
new file mode 100644
index 00000000000000..a5a9aa734b7a25
--- /dev/null
+++ b/docs/data/material/components/material-icons/SizeMaterialIcon.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import AcUnitIcon from '@mui/icons-material/AcUnit';
+import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
+import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
+
+export default function SizeMaterialIcon() {
+  return (
+    <Stack spacing={2} direction="row" useFlexGap alignItems="center">
+      <AddAPhotoIcon sx={{ fontSize: 10 }} />
+      <AcUnitIcon fontSize="small" />
+      <AccountBalanceIcon fontSize="large" />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/material-icons/SizeMaterialIcon.tsx.preview b/docs/data/material/components/material-icons/SizeMaterialIcon.tsx.preview
new file mode 100644
index 00000000000000..9bb311a4167085
--- /dev/null
+++ b/docs/data/material/components/material-icons/SizeMaterialIcon.tsx.preview
@@ -0,0 +1,3 @@
+<AddAPhotoIcon sx={{ fontSize: 10 }} />
+<AcUnitIcon fontSize="small" />
+<AccountBalanceIcon fontSize="large" />
\ No newline at end of file
diff --git a/docs/data/material/components/material-icons/material-icons.md b/docs/data/material/components/material-icons/material-icons.md
index fcc8997547c097..9b9f645ac6285e 100644
--- a/docs/data/material/components/material-icons/material-icons.md
+++ b/docs/data/material/components/material-icons/material-icons.md
@@ -8,13 +8,13 @@ githubLabel: 'package: icons'
 
 # Material Icons
 
-<p class="description">2,100+ ready-to-use React Material Icons from the official website.</p>
+<p class="description">2,100+ ready-to-use React Material Icons.</p>
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
-<br/>
 
-[@mui/icons-material](https://www.npmjs.com/package/@mui/icons-material)
-includes the 2,100+ official [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) converted to [`SvgIcon`](/material-ui/api/svg-icon/) components.
+## Introduction
+
+The [`@mui/icons-material`](https://www.npmjs.com/package/@mui/icons-material) package includes the 2,100+ official [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) converted to [`SvgIcon`](/material-ui/icons/#svgicon/) components.
 It depends on `@mui/material`, which requires Emotion packages.
 Use one of the following commands to install it:
 
@@ -36,7 +36,31 @@ pnpm add @mui/icons-material @mui/material @emotion/styled @emotion/react
 
 See the [Installation](/material-ui/getting-started/installation/) page for additional docs about how to make sure everything is set up correctly.
 
-<hr/>
+## Basics
+
+Material Icons use the Material UI [SVG Icon](/material-ui/icons/#svgicon/) component under the hood, so they render without any customization, and feature several props for quickly customizing styles.
+
+{{"demo": "BasicMaterialIcon.js"}}
+
+:::info
+Visit [the SVG Icon component section in the Icon doc](/material-ui/icons/#svgicon/) for further information about its other props, as well as how to use it with other icon libraries.
+:::
+
+### Size
+
+Use the `fontSize` prop to toggle between small, medium (default, 24x24px), or large icon sizes.
+You can also use the `sx` prop to pick arbitrary values that are outside of this built-in scale.
+
+{{"demo": "SizeMaterialIcon.js"}}
+
+### Color
+
+Use the `color` prop to choose a palette key from the theme.
+It defaults to the `main` value of its respective palette.
+
+{{"demo": "ColorMaterialIcon.js"}}
+
+## Browse the library
 
 Browse through the icons below to find the one you need.
 The search field supports synonyms—for example, try searching for "hamburger" or "logout."
diff --git a/docs/pages/material-ui/material-icons.js b/docs/pages/material-ui/material-icons.js
index d408a15f74d935..550e0814c4a0b5 100644
--- a/docs/pages/material-ui/material-icons.js
+++ b/docs/pages/material-ui/material-icons.js
@@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import * as pageProps from 'docs/data/material/components/material-icons/material-icons.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} disableToc />;
+  return <MarkdownDocs {...pageProps} />;
 }