[material-ui][docs] Add more content to the Material Icons page

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/

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>
+  );
+}

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>
+  );
+}

docs/data/material/components/material-icons/BasicMaterialIcon.tsx.preview

@@ -0,0 +1,3 @@
+<AcUnitIcon />
+<AccountBalanceIcon />
+<AddAPhotoIcon />

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>
+  );
+}

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>
+  );
+}

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" />

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 }}>

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>
+  );
+}

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>
+  );
+}

docs/data/material/components/material-icons/SizeMaterialIcon.tsx.preview

@@ -0,0 +1,3 @@
+<AddAPhotoIcon sx={{ fontSize: 10 }} />
+<AcUnitIcon fontSize="small" />
+<AccountBalanceIcon fontSize="large" />

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."

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} />;
 }