UX: Replace all fa-bell instances with Notification icon (#17524)

* UX: Replace all fa-bell instances with Notification icon

* Fix flask comment fencing

* Fix import error

ui/components/app/account-menu/account-menu.component.js

@@ -39,8 +39,14 @@ import IconImport from '../../ui/icon/icon-import';
 import Button from '../../ui/button';
 import SearchIcon from '../../ui/icon/search-icon';
 import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
-import { Icon, ICON_NAMES } from '../../component-library';
 import { Color } from '../../../helpers/constants/design-system';
+import {
+  Icon,
+  ICON_NAMES,
+  ///: BEGIN:ONLY_INCLUDE_IN(flask)
+  ICON_SIZES,
+  ///: END:ONLY_INCLUDE_IN
+} from '../../component-library';
 import KeyRingLabel from './keyring-label';
 
 export function AccountMenuItem(props) {
@@ -426,7 +432,7 @@ export default class AccountMenu extends Component {
               }}
               icon={
                 <div className="account-menu__notifications">
-                  <i className="fa fa-bell fa-xl" />
+                  <Icon name={ICON_NAMES.NOTIFICATION} size={ICON_SIZES.LG} />
                   {unreadNotificationsCount > 0 && (
                     <div className="account-menu__notifications__count">
                       {unreadNotificationsCount}

ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js

@@ -20,7 +20,7 @@ function getDescriptionNode(
 ) {
   return (
     <div className="permission" key={`${permissionName}-${index}`}>
-      <i className={leftIcon} />
+      {typeof leftIcon === 'string' ? <i className={leftIcon} /> : leftIcon}
       {label}
       {rightIcon && <i className={rightIcon} />}
     </div>

ui/components/app/tab-bar/tab-bar.stories.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Icon, ICON_NAMES } from '../../component-library';
 import TabBar from '.';
 
 export default {
@@ -38,7 +39,7 @@ export default {
         key: 'securityAndPrivacy',
       },
       {
-        icon: <i className="fa fa-bell" />,
+        icon: <Icon name={ICON_NAMES.NOTIFICATION} />,
         content: 'Alerts',
         key: 'alerts',
       },

ui/helpers/constants/settings.js

@@ -1,3 +1,4 @@
+import { ICON_NAMES } from '../../components/component-library';
 import {
   ALERTS_ROUTE,
   ADVANCED_ROUTE,
@@ -223,7 +224,7 @@ export const SETTINGS_CONSTANTS = [
     sectionMessage: (t) => t('alertSettingsUnconnectedAccount'),
     descriptionMessage: (t) => t('alertSettingsUnconnectedAccount'),
     route: `${ALERTS_ROUTE}#unconnected-account`,
-    icon: 'fa fa-bell',
+    iconName: ICON_NAMES.NOTIFICATION,
   },
   {
     tabMessage: (t) => t('alerts'),

ui/helpers/utils/permission.js

@@ -14,6 +14,7 @@ import {
 } from '../../../shared/constants/permissions';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 import { SNAPS_METADATA } from '../../../shared/constants/snaps';
+import { Icon, ICON_NAMES } from '../../components/component-library';
 import { coinTypeToProtocolName, getSnapDerivationPathName } from './util';
 ///: END:ONLY_INCLUDE_IN
 
@@ -40,7 +41,7 @@ const PERMISSION_DESCRIPTIONS = deepFreeze({
     weight: 3,
   }),
   [RestrictedMethods.snap_notify]: (t) => ({
-    leftIcon: 'fas fa-bell',
+    leftIcon: <Icon name={ICON_NAMES.NOTIFICATION} />,
     label: t('permission_notifications'),
     rightIcon: null,
     weight: 3,

ui/pages/settings/settings-search-list/settings-search-list.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { highlightSearchedText } from '../../../helpers/utils/settings-search';
 import { I18nContext } from '../../../contexts/i18n';
 import IconCaretRight from '../../../components/ui/icon/icon-caret-right';
+import { Icon } from '../../../components/component-library';
 
 export default function SettingsSearchList({ results, onClickSetting }) {
   const t = useContext(I18nContext);
@@ -13,7 +14,7 @@ export default function SettingsSearchList({ results, onClickSetting }) {
   return (
     <div className="settings-page__header__search__list">
       {results.slice(0, 5).map((result) => {
-        const { icon, tabMessage, sectionMessage, route } = result;
+        const { icon, iconName, tabMessage, sectionMessage, route } = result;
         return (
           Boolean(icon || tabMessage || sectionMessage) && (
             <div key={`settings_${route}`}>
@@ -21,13 +22,16 @@ export default function SettingsSearchList({ results, onClickSetting }) {
                 className="settings-page__header__search__list__item"
                 onClick={() => onClickSetting(result)}
               >
-                <i
+                {iconName ? (
-                  className={classnames(
+                  <Icon name={iconName} />
-                    'settings-page__header__search__list__item__icon',
+                ) : (
-                    icon,
+                  <i
-                  )}
+                    className={classnames(
-                />
+                      'settings-page__header__search__list__item__icon',
-
+                      icon,
+                    )}
+                  />
+                )}
                 <span
                   id={`menu-tab_${route}`}
                   className={classnames(

ui/pages/settings/settings.component.js

@@ -28,6 +28,7 @@ import {
 
 import { getSettingsRoutes } from '../../helpers/utils/settings-search';
 import AddNetwork from '../../components/app/add-network/add-network';
+import { Icon, ICON_NAMES } from '../../components/component-library';
 import SettingsTab from './settings-tab';
 import AlertsTab from './alerts-tab';
 import NetworksTab from './networks-tab';
@@ -290,7 +291,7 @@ class SettingsPage extends PureComponent {
           },
           {
             content: t('alerts'),
-            icon: <i className="fa fa-bell" />,
+            icon: <Icon name={ICON_NAMES.NOTIFICATION} />,
             key: ALERTS_ROUTE,
           },
           {