Add reusable block icon.

packages/components/src/dropdown-menu/style.scss

@@ -53,16 +53,17 @@
 	.components-menu-item__button.components-button {
 		min-height: $button-size;
 		height: auto;
-		padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10;
 		text-align: left;
+		padding-left: $grid-unit-10;
+		padding-right: $grid-unit-10;
 
-		&.has-icon {
-			padding-left: $grid-unit-10;
+		.components-menu-item__info-wrapper {
+			max-width: calc(100% - #{ $button-size-small + $grid-unit-10 });
 		}
 	}
 
 	.components-menu-group {
-		padding: $grid-unit-15;
+		padding: $grid-unit-15 $grid-unit-10;
 		margin-top: 0;
 		margin-bottom: 0;
 		margin-left: -$grid-unit-15;
@@ -80,7 +81,7 @@
 	.components-menu-group + .components-menu-group {
 		margin-top: 0;
 		border-top: $border-width solid $gray-400;
-		padding: $grid-unit-15;
+		padding: $grid-unit-15 $grid-unit-10;
 
 		.is-alternate & {
 			border-color: $gray-900;

packages/components/src/menu-group/style.scss

@@ -5,7 +5,7 @@
 }
 
 .components-menu-group__label {
-	padding: 0;
+	padding: 0 $grid-unit-10;
 	margin-bottom: $grid-unit-15;
 	color: $gray-700;
 	text-transform: uppercase;

packages/components/src/menu-item/index.js

@@ -14,6 +14,7 @@ import { cloneElement, forwardRef } from '@wordpress/element';
  */
 import Shortcut from '../shortcut';
 import Button from '../button';
+import Icon from '../icon';
 
 /**
  * Renders a generic menu item for use inside the more menu.
@@ -63,7 +64,6 @@ export function MenuItem(
 	return (
 		<Button
 			ref={ ref }
-			icon={ icon }
 			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
 			aria-checked={
 				role === 'menuitemcheckbox' || role === 'menuitemradio'
@@ -75,10 +75,13 @@ export function MenuItem(
 			{ ...props }
 		>
 			{ children }
-			<Shortcut
-				className="components-menu-item__shortcut"
-				shortcut={ shortcut }
-			/>
+			{ ! icon && (
+				<Shortcut
+					className="components-menu-item__shortcut"
+					shortcut={ shortcut }
+				/>
+			) }
+			{ icon && <Icon icon={ icon } /> }
 		</Button>
 	);
 }

packages/components/src/menu-item/style.scss

@@ -8,7 +8,8 @@
 	.components-menu-items__item-icon,
 	svg.components-menu-items__item-icon,
 	> span > svg {
-		margin-right: $grid-unit-10;
+		margin-right: 0;
+		margin-left: auto;
 	}
 
 	.components-menu-items__item-icon {

packages/components/src/menu-items-choice/style.scss

@@ -1,12 +1,10 @@
 .components-menu-items-choice,
 .components-menu-items-choice.components-button {
-	padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10;
-
 	svg {
-		margin-right: $grid-unit-10;
+		margin-right: $grid-unit-15;
 	}
 
 	&.has-icon {
-		padding-left: $grid-unit-10;
+		padding-left: $grid-unit-15;
 	}
 }

packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js

@@ -4,6 +4,7 @@
 import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
 import { BlockSettingsMenuControls } from '@wordpress/block-editor';
 import { MenuItem } from '@wordpress/components';
+import { reusableBlock } from '@wordpress/icons';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -68,6 +69,7 @@ export default function ReusableBlockConvertButton( { clientIds } ) {
 		<BlockSettingsMenuControls>
 			{ ( { onClose } ) => (
 				<MenuItem
+					icon={ reusableBlock }
 					onClick={ () => {
 						convertBlockToReusable( clientIds );
 						onClose();

packages/icons/src/index.js

@@ -15,6 +15,7 @@ export { default as audio } from './library/audio';
 export { default as backup } from './library/backup';
 export { default as blockDefault } from './library/block-default';
 export { default as blockTable } from './library/block-table';
+export { default as box } from './library/box';
 export { default as brush } from './library/brush';
 export { default as button } from './library/button';
 export { default as calendar } from './library/calendar';
@@ -127,7 +128,6 @@ export { default as postFeaturedImage } from './library/post-featured-image';
 export { default as postList } from './library/post-list';
 export { default as postTitle } from './library/post-title';
 export { default as preformatted } from './library/preformatted';
-export { default as box } from './library/box';
 export { default as pullLeft } from './library/pull-left';
 export { default as pullRight } from './library/pull-right';
 export { default as pullquote } from './library/pullquote';
@@ -136,6 +136,7 @@ export { default as receipt } from './library/receipt';
 export { default as redo } from './library/redo';
 export { default as replace } from './library/replace';
 export { default as resizeCornerNE } from './library/resize-corner-n-e';
+export { default as reusableBlock } from './library/reusable-block';
 export { default as rotateLeft } from './library/rotate-left';
 export { default as rotateRight } from './library/rotate-right';
 export { default as rss } from './library/rss';

packages/icons/src/library/reusable-block.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const reusableBlock = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M7 7.2h8.2L13.5 9l1.1 1.1 3.6-3.6-3.5-4-1.1 1 1.9 2.3H7c-.9 0-1.7.3-2.3.9-1.4 1.5-1.4 4.2-1.4 5.6v.2h1.5v-.3c0-1.1 0-3.5 1-4.5.3-.3.7-.5 1.2-.5zm13.8 4V11h-1.5v.3c0 1.1 0 3.5-1 4.5-.3.3-.7.5-1.3.5H8.8l1.7-1.7-1.1-1.1L5.9 17l3.5 4 1.1-1-1.9-2.3H17c.9 0 1.7-.3 2.3-.9 1.5-1.4 1.5-4.2 1.5-5.6z" />
+	</SVG>
+);
+
+export default reusableBlock;