[docs] Adjust the Material Icons page design and formatting (#36937)

Co-authored-by: Sam Sycamore <[email protected]>

docs/data/material/components/material-icons/SearchIcons.js

@@ -399,9 +399,10 @@ DialogDetails.propTypes = {
   selectedIcon: PropTypes.object,
 };
 
-const Form = styled('form')(({ theme }) => ({
-  margin: theme.spacing(2, 0),
-}));
+const Form = styled('form')({
+  position: 'sticky',
+  top: 80,
+});
 
 const Paper = styled(MuiPaper)(({ theme }) => ({
   position: 'sticky',
@@ -411,6 +412,9 @@ const Paper = styled(MuiPaper)(({ theme }) => ({
   alignItems: 'center',
   marginBottom: theme.spacing(2),
   width: '100%',
+  borderRadius: '12px',
+  border: '1px solid',
+  borderColor: theme.palette.divider,
 }));
 
 function formatNumber(value) {
@@ -538,9 +542,12 @@ export default function SearchIcons() {
   );
 
   return (
-    <Grid container sx={{ minHeight: 500 }}>
+    <Grid container sx={{ minHeight: 500, my: 2 }}>
       <Grid item xs={12} sm={3}>
         <Form>
+          <Typography fontWeight={500} sx={{ mb: 1 }}>
+            Filter the style
+          </Typography>
           <RadioGroup>
             {['Filled', 'Outlined', 'Rounded', 'Two tone', 'Sharp'].map(
               (currentTheme) => {
@@ -549,6 +556,7 @@ export default function SearchIcons() {
                     key={currentTheme}
                     control={
                       <Radio
+                        size="small"
                         checked={theme === currentTheme}
                         onChange={() => setTheme(currentTheme)}
                         value={currentTheme}

docs/data/material/components/material-icons/material-icons.md

@@ -10,20 +10,23 @@ githubLabel: 'package: icons'
 
 <p class="description">2,100+ ready-to-use React Material Icons from the official website.</p>
 
-The following npm package,
-[@mui/icons-material](https://www.npmjs.com/package/@mui/icons-material),
+{{"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.
+It depends on `@mui/material`, which requires Emotion packages.
+Use the following command to install it:
 
-:::info
-The `@mui/icons-material` package depends on `@mui/material`, which requires Emotion packages.
-If you don't use Material UI in your project yet, install the icons package with:
-`npm install @mui/icons-material @mui/material @emotion/styled @emotion/react`.
+```sh
+npm install @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.
-:::
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+<hr/>
 
-{{"demo": "SearchIcons.js", "hideToolbar": true, "bg": true}}
+Browse through the icons below to find the one you need.
+The search field supports synonyms—for example, try searching for "hamburger" or "logout."
 
-ℹ️ The search supports synonyms. Try searching for "hamburger" or "logout".
+{{"demo": "SearchIcons.js", "hideToolbar": true, "bg": true}}

docs/src/modules/components/MarkdownElement.js

@@ -342,7 +342,7 @@ const Root = styled('div')(
     },
     '& hr': {
       height: 1,
-      margin: theme.spacing(6, 0),
+      margin: theme.spacing(5, 0),
       border: 0,
       flexShrink: 0,
       backgroundColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,