From 8b01a81c0d1b87f1953cde622d9625a64608e8e3 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 5 Jan 2024 16:31:01 -0300
Subject: [PATCH 1/3] add more content to the Material Icons page

---
 .../material-icons/BasicMaterialIcon.js       | 15 +++++++++
 .../material-icons/BasicMaterialIcon.tsx      | 15 +++++++++
 .../BasicMaterialIcon.tsx.preview             |  3 ++
 .../material-icons/ColorMaterialIcon.js       | 16 ++++++++++
 .../material-icons/ColorMaterialIcon.tsx      | 16 ++++++++++
 .../ColorMaterialIcon.tsx.preview             |  6 ++++
 .../components/material-icons/SearchIcons.js  | 20 +++++++++---
 .../material-icons/SizeMaterialIcon.js        | 15 +++++++++
 .../material-icons/SizeMaterialIcon.tsx       | 15 +++++++++
 .../SizeMaterialIcon.tsx.preview              |  3 ++
 .../material-icons/material-icons.md          | 31 +++++++++++++++++--
 docs/pages/material-ui/material-icons.js      |  2 +-
 12 files changed, 149 insertions(+), 8 deletions(-)
 create mode 100644 docs/data/material/components/material-icons/BasicMaterialIcon.js
 create mode 100644 docs/data/material/components/material-icons/BasicMaterialIcon.tsx
 create mode 100644 docs/data/material/components/material-icons/BasicMaterialIcon.tsx.preview
 create mode 100644 docs/data/material/components/material-icons/ColorMaterialIcon.js
 create mode 100644 docs/data/material/components/material-icons/ColorMaterialIcon.tsx
 create mode 100644 docs/data/material/components/material-icons/ColorMaterialIcon.tsx.preview
 create mode 100644 docs/data/material/components/material-icons/SizeMaterialIcon.js
 create mode 100644 docs/data/material/components/material-icons/SizeMaterialIcon.tsx
 create mode 100644 docs/data/material/components/material-icons/SizeMaterialIcon.tsx.preview

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..7c0462328023a8 100644
--- a/docs/data/material/components/material-icons/material-icons.md
+++ b/docs/data/material/components/material-icons/material-icons.md
@@ -11,10 +11,11 @@ githubLabel: 'package: icons'
 <p class="description">2,100+ ready-to-use React Material Icons from the official website.</p>
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
-<br/>
+
+## Introduction
 
 [@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.
+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 +37,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 [`SvgIcon`](/material-ui/icons/#svgicon/) component under the hood, meaning they render without any form of customization, and it features several handy props for you to quickly customize its styles.
+
+{{"demo": "BasicMaterialIcon.js"}}
+
+:::info
+Visit [the SvgIcon component section in the Icon page](/material-ui/icons/#svgicon/) for further information about its other props, and even how to use it with different icon libraries.
+:::
+
+### Size
+
+Use the `fontSize` prop to toggle between small, medium (default, 24x24px), or large sizes.
+You can also use the `sx` prop to pick values that are outside of this built-in scale.
+
+{{"demo": "SizeMaterialIcon.js"}}
+
+### Color
+
+Use the `color` prop to pick from a different palette key from the theme.
+It defaults to the `main` value of whatever 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} />;
 }

From 509c67b860de27747f3357cc6c88b92ee80d6db4 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 5 Jan 2024 16:43:09 -0300
Subject: [PATCH 2/3] docs:link-check

---
 docs/.link-check-errors.txt | 1 +
 1 file changed, 1 insertion(+)

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/

From d95124095f9eaeca26213ea17ca3234fe34c3600 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 5 Jan 2024 17:47:16 -0300
Subject: [PATCH 3/3] Sam's review

---
 .../components/material-icons/material-icons.md | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/docs/data/material/components/material-icons/material-icons.md b/docs/data/material/components/material-icons/material-icons.md
index 7c0462328023a8..9b9f645ac6285e 100644
--- a/docs/data/material/components/material-icons/material-icons.md
+++ b/docs/data/material/components/material-icons/material-icons.md
@@ -8,14 +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"}}
 
 ## Introduction
 
-[@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/icons/#svgicon/) components.
+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:
 
@@ -39,25 +38,25 @@ See the [Installation](/material-ui/getting-started/installation/) page for addi
 
 ## Basics
 
-Material Icons use the Material UI [`SvgIcon`](/material-ui/icons/#svgicon/) component under the hood, meaning they render without any form of customization, and it features several handy props for you to quickly customize its styles.
+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 SvgIcon component section in the Icon page](/material-ui/icons/#svgicon/) for further information about its other props, and even how to use it with different icon libraries.
+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 sizes.
-You can also use the `sx` prop to pick values that are outside of this built-in scale.
+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 pick from a different palette key from the theme.
-It defaults to the `main` value of whatever palette.
+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"}}