Fix #17441 - Update all MenuItem instances to use new icons (#17468)

ui/components/app/connected-accounts-list/connected-accounts-list.component.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+import { ICON_NAMES } from '../../component-library';
 import { MenuItem } from '../../ui/menu';
 import ConnectedAccountsListItem from './connected-accounts-list-item';
 import ConnectedAccountsListOptions from './connected-accounts-list-options';
@@ -104,7 +105,7 @@ export default class ConnectedAccountsList extends PureComponent {
         onShowOptions={this.showAccountOptions.bind(null, address)}
         show={accountWithOptionsShown === address}
       >
-        <MenuItem iconClassName="fa fa-ban" onClick={this.disconnectAccount}>
+        <MenuItem iconName={ICON_NAMES.LOGOUT} onClick={this.disconnectAccount}>
           {t('disconnectThisAccount')}
         </MenuItem>
       </ConnectedAccountsListOptions>

ui/components/app/menu-bar/account-options-menu.js

@@ -24,6 +24,7 @@ import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
 import { HardwareKeyringTypes } from '../../../../shared/constants/hardware-wallets';
 import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { ICON_NAMES } from '../../component-library';
 
 export default function AccountOptionsMenu({ anchorElement, onClose }) {
   const t = useI18nContext();
@@ -82,7 +83,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
             </span>
           ) : null
         }
-        iconClassName="fas fa-external-link-alt"
+        iconName={ICON_NAMES.EXPORT}
       >
         {t(
           blockExplorerLinkText.firstPart,
@@ -104,7 +105,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
             global.platform.openExtensionInBrowser();
             onClose();
           }}
-          iconClassName="fas fa-expand-alt"
+          iconName={ICON_NAMES.EXPAND}
         >
           {t('expandView')}
         </MenuItem>
@@ -122,7 +123,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
           });
           onClose();
         }}
-        iconClassName="fas fa-qrcode"
+        iconName={ICON_NAMES.SCAN_BARCODE}
       >
         {t('accountDetails')}
       </MenuItem>
@@ -139,7 +140,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
           history.push(CONNECTED_ROUTE);
           onClose();
         }}
-        iconClassName="fa fa-bullseye"
+        iconName={ICON_NAMES.CONNECT}
       >
         {t('connectedSites')}
       </MenuItem>
@@ -155,7 +156,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
             );
             onClose();
           }}
-          iconClassName="fas fa-trash-alt"
+          iconName={ICON_NAMES.TRASH}
         >
           {t('removeAccount')}
         </MenuItem>

ui/components/ui/menu/menu-item.js

@@ -8,7 +8,6 @@ const MenuItem = ({
   children,
   className,
   'data-testid': dataTestId,
-  iconClassName,
   iconName,
   onClick,
   subtitle,
@@ -18,9 +17,6 @@ const MenuItem = ({
     data-testid={dataTestId}
     onClick={onClick}
   >
-    {iconClassName ? (
-      <i className={classnames('menu-item__icon', iconClassName)} />
-    ) : null}
     {iconName ? (
       <Icon name={iconName} size={ICON_SIZES.SM} marginRight={2} />
     ) : null}
@@ -33,7 +29,6 @@ MenuItem.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   'data-testid': PropTypes.string,
-  iconClassName: PropTypes.string,
   iconName: PropTypes.string,
   onClick: PropTypes.func,
   subtitle: PropTypes.node,
@@ -42,7 +37,6 @@ MenuItem.propTypes = {
 MenuItem.defaultProps = {
   className: undefined,
   'data-testid': undefined,
-  iconClassName: undefined,
   iconName: undefined,
   onClick: undefined,
   subtitle: undefined,

ui/components/ui/menu/menu.stories.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
+import { ICON_NAMES } from '../../component-library';
 import { Menu, MenuItem } from '.';
 
 export default {
@@ -9,11 +10,11 @@ export default {
 export const DefaultStory = () => {
   return (
     <Menu onHide={action('Hide')}>
-      <MenuItem iconClassName="fas fa-bullseye" onClick={action('Menu Item 1')}>
+      <MenuItem iconName={ICON_NAMES.EYE} onClick={action('Menu Item 1')}>
         Menu Item 1
       </MenuItem>
       <MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
-      <MenuItem iconClassName="fas fa-bold" onClick={action('Menu Item 3')}>
+      <MenuItem iconName={ICON_NAMES.EYE_SLASH} onClick={action('Menu Item 3')}>
         Menu Item 3
       </MenuItem>
     </Menu>
@@ -28,14 +29,14 @@ export const Anchored = () => {
     <>
       <button ref={setAnchorElement}>Menu</button>
       <Menu anchorElement={anchorElement} onHide={action('Hide')}>
-        <MenuItem
+        <MenuItem iconName={ICON_NAMES.EXPORT} onClick={action('Menu Item 1')}>
-          iconClassName="fas fa-bullseye"
-          onClick={action('Menu Item 1')}
-        >
           Menu Item 1
         </MenuItem>
         <MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
-        <MenuItem iconClassName="fas fa-bold" onClick={action('Menu Item 3')}>
+        <MenuItem
+          iconName={ICON_NAMES.EYE_SLSH}
+          onClick={action('Menu Item 3')}
+        >
           Menu Item 3
         </MenuItem>
       </Menu>

ui/pages/asset/components/asset-options.js

@@ -7,6 +7,7 @@ import { I18nContext } from '../../../contexts/i18n';
 import { Menu, MenuItem } from '../../../components/ui/menu';
 import { getBlockExplorerLinkText } from '../../../selectors';
 import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
+import { ICON_NAMES } from '../../../components/component-library';
 
 const AssetOptions = ({
   onRemove,
@@ -47,7 +48,7 @@ const AssetOptions = ({
           onHide={() => setAssetOptionsOpen(false)}
         >
           <MenuItem
-            iconClassName="fas fa-qrcode"
+            iconName={ICON_NAMES.SCAN_BARCODE}
             data-testid="asset-options__account-details"
             onClick={() => {
               setAssetOptionsOpen(false);
@@ -57,7 +58,7 @@ const AssetOptions = ({
             {t('accountDetails')}
           </MenuItem>
           <MenuItem
-            iconClassName="fas fa-external-link-alt asset-options__icon"
+            iconName={ICON_NAMES.EXPORT}
             data-testid="asset-options__etherscan"
             onClick={
               blockExplorerLinkText.firstPart === 'addBlockExplorer'
@@ -74,7 +75,7 @@ const AssetOptions = ({
           </MenuItem>
           {isNativeAsset ? null : (
             <MenuItem
-              iconClassName="fas fa-trash-alt asset-options__icon"
+              iconName={ICON_NAMES.TRASH}
               data-testid="asset-options__hide"
               onClick={() => {
                 setAssetOptionsOpen(false);
@@ -86,7 +87,7 @@ const AssetOptions = ({
           )}
           {isNativeAsset ? null : (
             <MenuItem
-              iconClassName="fas fa-info-circle asset-options__icon"
+              iconName={ICON_NAMES.INFO}
               data-testid="asset-options__token-details"
               onClick={() => {
                 setAssetOptionsOpen(false);