diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
index 6ec672858da80e..0d96d5512ba554 100644
--- a/docs/data/base/pages.ts
+++ b/docs/data/base/pages.ts
@@ -1,12 +1,10 @@
import type { MuiPage } from 'docs/src/MuiPage';
-import standardNavIcons from 'docs/src/modules/components/AppNavIcons';
import pagesApi from 'docs/data/base/pagesApi';
const pages: readonly MuiPage[] = [
{
pathname: '/base-ui/getting-started-group',
title: 'Getting started',
- icon: standardNavIcons.DescriptionIcon,
children: [
{ pathname: '/base-ui/getting-started', title: 'Overview' },
{ pathname: '/base-ui/getting-started/quickstart', title: 'Quickstart' },
@@ -17,7 +15,6 @@ const pages: readonly MuiPage[] = [
{
pathname: '/base-ui/react-',
title: 'Components',
- icon: standardNavIcons.ToggleOnIcon,
children: [
{ pathname: '/base-ui/all-components', title: 'All components' },
{
@@ -93,13 +90,11 @@ const pages: readonly MuiPage[] = [
{
title: 'APIs',
pathname: '/base-ui/api',
- icon: standardNavIcons.CodeIcon,
children: pagesApi,
},
{
pathname: '/base-ui/guides',
title: 'How-to guides',
- icon: standardNavIcons.VisibilityIcon,
children: [
{
pathname: '/base-ui/guides/working-with-tailwind-css',
diff --git a/docs/data/docs-infra/pages.ts b/docs/data/docs-infra/pages.ts
index 727b3655c237e4..3d01f2ae52e10e 100644
--- a/docs/data/docs-infra/pages.ts
+++ b/docs/data/docs-infra/pages.ts
@@ -1,16 +1,13 @@
import type { MuiPage } from 'docs/src/MuiPage';
-import standardNavIcons from 'docs/src/modules/components/AppNavIcons';
const pages: readonly MuiPage[] = [
{
pathname: '/experiments/docs/writing',
title: 'Writing',
- icon: standardNavIcons.DescriptionIcon,
children: [{ pathname: '/experiments/docs/headers' }],
},
{
pathname: '/experiments/docs/components',
- icon: standardNavIcons.DescriptionIcon,
children: [
{ pathname: '/experiments/docs/callouts' },
{ pathname: '/experiments/docs/demos' },
@@ -20,7 +17,6 @@ const pages: readonly MuiPage[] = [
{
pathname: '/experiments/docs/main-parent',
title: 'Main parent',
- icon: standardNavIcons.DescriptionIcon,
children: [
{
pathname: '/experiments/docs/first-level-child-1',
@@ -55,7 +51,6 @@ const pages: readonly MuiPage[] = [
},
{
pathname: '/x/react-data-grid-group',
- icon: standardNavIcons.DescriptionIcon,
title: 'Data Grid',
children: [
{ pathname: '/x/react-data-grid', title: 'Overview' },
@@ -169,7 +164,6 @@ const pages: readonly MuiPage[] = [
{
pathname: '/x/migration-group',
title: 'Migration',
- icon: standardNavIcons.DescriptionIcon,
children: [
{
pathname: '/x/migration-v6',
diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index d5b164b9571eb7..b2fb562f6f54a2 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -1,12 +1,10 @@
import type { MuiPage } from 'docs/src/MuiPage';
-import standardNavIcons from 'docs/src/modules/components/AppNavIcons';
import pagesApi from 'docs/data/joy/pagesApi';
const pages: readonly MuiPage[] = [
{
pathname: '/joy-ui/getting-started-group',
title: 'Getting started',
- icon: standardNavIcons.DescriptionIcon,
children: [
{ pathname: '/joy-ui/getting-started', title: 'Overview' },
{ pathname: '/joy-ui/getting-started/installation' },
@@ -28,7 +26,6 @@ const pages: readonly MuiPage[] = [
{
pathname: '/joy-ui/react-',
title: 'Components',
- icon: standardNavIcons.ToggleOnIcon,
children: [
{
pathname: '/joy-ui/components/inputs',
@@ -114,12 +111,10 @@ const pages: readonly MuiPage[] = [
{
title: 'APIs',
pathname: '/joy-ui/api',
- icon: standardNavIcons.CodeIcon,
children: pagesApi,
},
{
pathname: '/joy-ui/customization',
- icon: standardNavIcons.CreateIcon,
children: [
{ pathname: '/joy-ui/customization/approaches' },
{ pathname: '/joy-ui/customization/dark-mode' },
@@ -147,7 +142,6 @@ const pages: readonly MuiPage[] = [
{
pathname: '/joy-ui/guides',
title: 'How-to guides',
- icon: standardNavIcons.VisibilityIcon,
children: [
{
pathname: '/joy-ui/guides/overriding-component-structure',
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index abf4bd69ef0dd9..c13d2d9b5b1653 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -6,7 +6,6 @@ const pages: MuiPage[] = [
{
pathname: '/material-ui/getting-started-group',
title: 'Getting started',
- icon: standardNavIcons.DescriptionIcon,
children: [
{ pathname: '/material-ui/getting-started', title: 'Overview' },
{ pathname: '/material-ui/getting-started/installation' },
@@ -24,7 +23,6 @@ const pages: MuiPage[] = [
{
pathname: '/material-ui/react-',
title: 'Components',
- icon: standardNavIcons.ToggleOnIcon,
children: [
{
pathname: '/material-ui/components/inputs',
@@ -153,12 +151,10 @@ const pages: MuiPage[] = [
{
title: 'Component API',
pathname: '/material-ui/api',
- icon: standardNavIcons.CodeIcon,
children: pagesApi,
},
{
pathname: '/material-ui/customization',
- icon: standardNavIcons.CreateIcon,
children: [
{
pathname: '/material-ui/customization/theme',
@@ -184,7 +180,6 @@ const pages: MuiPage[] = [
{
pathname: '/material-ui/guides',
title: 'How-to guides',
- icon: standardNavIcons.VisibilityIcon,
children: [
{ pathname: '/material-ui/guides/api', title: 'API design approach' },
{ pathname: '/material-ui/guides/understand-mui-packages', title: 'Understand MUI packages' },
@@ -214,7 +209,6 @@ const pages: MuiPage[] = [
{
pathname: '/material-ui/experimental-api',
title: 'Experimental APIs',
- icon: standardNavIcons.ExperimentIcon,
children: [
{
pathname: '/material-ui/experimental-api/classname-generator',
@@ -237,7 +231,6 @@ const pages: MuiPage[] = [
},
{
pathname: '/material-ui/discover-more',
- icon: standardNavIcons.AddIcon,
children: [
{ pathname: '/material-ui/discover-more/showcase' },
{ pathname: '/material-ui/discover-more/related-projects' },
@@ -251,7 +244,6 @@ const pages: MuiPage[] = [
{
pathname: '/material-ui/migration',
title: 'Migration',
- icon: standardNavIcons.BookIcon,
children: [
{
pathname: '/material-ui/migration/migration-grid-v2',
diff --git a/docs/data/system/pages.ts b/docs/data/system/pages.ts
index e4b4fd3c457aca..5ab6e92574294c 100644
--- a/docs/data/system/pages.ts
+++ b/docs/data/system/pages.ts
@@ -6,7 +6,6 @@ const pages: readonly MuiPage[] = [
{
pathname: '/system/getting-started-group',
title: 'Getting started',
- icon: standardNavIcons.DescriptionIcon,
children: [
{ pathname: '/system/getting-started', title: 'Overview' },
{ pathname: '/system/getting-started/installation' },
@@ -17,7 +16,6 @@ const pages: readonly MuiPage[] = [
},
{
pathname: '/style-utilities',
- icon: standardNavIcons.BuildIcon,
children: [
{ pathname: '/system/properties' },
{ pathname: '/system/borders' },
@@ -37,7 +35,6 @@ const pages: readonly MuiPage[] = [
{
pathname: '/system/react-',
title: 'Components',
- icon: standardNavIcons.ToggleOnIcon,
children: [
{ pathname: '/system/react-box', title: 'Box' },
{ pathname: '/system/react-container', title: 'Container' },
@@ -48,13 +45,11 @@ const pages: readonly MuiPage[] = [
{
title: 'APIs',
pathname: '/system/api',
- icon: standardNavIcons.CodeIcon,
children: pagesApi,
},
{
pathname: '/system/experimental-api',
title: 'Experimental APIs',
- icon: standardNavIcons.ExperimentIcon,
children: [
{
pathname: '/system/experimental-api/configure-the-sx-prop',
@@ -70,7 +65,6 @@ const pages: readonly MuiPage[] = [
pathname: '/system/styles',
title: 'Styles',
legacy: true,
- icon: standardNavIcons.StyleIcon,
children: [
{ pathname: '/system/styles/basics' },
{ pathname: '/system/styles/advanced' },
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 8b556aa7672c32..0959bb38a45e20 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -172,6 +172,7 @@ PersistScroll.propTypes = {
const ToolbarDiv = styled('div')(({ theme }) => ({
padding: theme.spacing(1.6, 2),
paddingRight: 0,
+ flexShrink: 0,
height: 'var(--MuiDocs-header-height)',
boxSizing: 'border-box', // TODO have CssBaseline in the Next.js layout
display: 'flex',
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index f6a0a225e913bb..e614e39268d6a0 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
import { alpha, styled } from '@mui/material/styles';
import Collapse from '@mui/material/Collapse';
+import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import { shouldHandleLinkClick } from 'docs/src/modules/components/MarkdownLinks';
import Link from 'docs/src/modules/components/Link';
@@ -45,7 +46,7 @@ const Item = styled(
}),
fontSize: theme.typography.pxToRem(14),
textDecoration: 'none',
- paddingLeft: 16 + (depth + 1) * 10 - (expandable ? 21 : 0),
+ paddingLeft: 10 + (depth + 1) * 13 - (expandable ? 21 : 0),
'&:before': {
content: '""',
display: 'block',
@@ -92,7 +93,7 @@ const Item = styled(
},
}),
...(hasIcon && {
- paddingLeft: 2,
+ paddingLeft: 0,
}),
'&.app-drawer-active': {
// To match browserUrlPreviewMarge
@@ -287,6 +288,21 @@ export default function AppNavDrawerItem(props) {
};
const hasIcon = icon && (typeof icon !== 'string' || !!standardNavIcons[icon]);
+ const IconComponent = typeof icon === 'string' ? standardNavIcons[icon] : icon;
+ const iconElement = hasIcon ? (
+ theme.typography.pxToRem(16.5) },
+ display: 'flex',
+ alignItems: 'center',
+ height: '100%',
+ marginRight: '6px',
+ }}
+ >
+
+
+ ) : null;
return (
@@ -304,6 +320,7 @@ export default function AppNavDrawerItem(props) {
onClick={handleClick}
{...linkProps}
>
+ {iconElement}
{expandable && }
{title}
{plan === 'pro' && }