diff --git a/packages/components/src/navigation/item/index.js b/packages/components/src/navigation/item/index.js
index 6996cb6fce272..a2ac076ea2ee1 100644
--- a/packages/components/src/navigation/item/index.js
+++ b/packages/components/src/navigation/item/index.js
@@ -15,7 +15,7 @@ import { isRTL } from '@wordpress/i18n';
*/
import Button from '../../button';
import { useNavigationContext } from '../context';
-import { ItemUI } from '../styles/navigation-styles';
+import { ItemUI, ItemIconUI } from '../styles/navigation-styles';
import NavigationItemBaseContent from './base-content';
import NavigationItemBase from './base';
@@ -29,6 +29,7 @@ export default function NavigationItem( props ) {
navigateToMenu,
onClick = noop,
title,
+ icon,
hideIfTargetMenuEmpty,
isText,
...restProps
@@ -62,7 +63,7 @@ export default function NavigationItem( props ) {
onClick( event );
};
- const icon = isRTL() ? chevronLeft : chevronRight;
+ const navigationIcon = isRTL() ? chevronLeft : chevronRight;
const baseProps = children ? props : { ...props, onClick: undefined };
const itemProps = isText
? restProps
@@ -72,12 +73,18 @@ export default function NavigationItem( props ) {
{ children || (
+ { icon && (
+
+
+
+ ) }
+
- { navigateToMenu && }
+ { navigateToMenu && }
) }
diff --git a/packages/components/src/navigation/stories/more-examples.js b/packages/components/src/navigation/stories/more-examples.js
index 8795e8f0284f4..ee06464245530 100644
--- a/packages/components/src/navigation/stories/more-examples.js
+++ b/packages/components/src/navigation/stories/more-examples.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { useEffect, useState } from '@wordpress/element';
-import { Icon, wordpress } from '@wordpress/icons';
+import { Icon, wordpress, home } from '@wordpress/icons';
/**
* Internal dependencies
@@ -33,6 +33,7 @@ export function MoreExamplesStory() {
( isRTL() ? '0' : space( 2 ) ) };
margin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
index e047ec0708012..83c8cf1945e69 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
@@ -20,6 +20,11 @@ import { __ } from '@wordpress/i18n';
import { ESCAPE } from '@wordpress/keycodes';
import { decodeEntities } from '@wordpress/html-entities';
import { addQueryArgs } from '@wordpress/url';
+import {
+ home as siteIcon,
+ layout as templateIcon,
+ symbolFilled as templatePartIcon,
+} from '@wordpress/icons';
/**
* Internal dependencies
@@ -87,6 +92,7 @@ const NavigationPanel = ( {