UX: Icons: Stop using fa-address-book (#17761)

* UX: Icons: Stop using fa-address-book

* Remove locale string

* Fix positioning

app/_locales/de/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "Adresse"
   },
-  "addressBookIcon": {
-    "message": "Adressbuchsymbol"
-  },
   "advanced": {
     "message": "Erweitert"
   },

app/_locales/el/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "Διεύθυνση"
   },
-  "addressBookIcon": {
-    "message": "Εικονίδιο βιβλίου διευθύνσεων"
-  },
   "advanced": {
     "message": "Σύνθετες"
   },

app/_locales/en/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "Address"
   },
-  "addressBookIcon": {
-    "message": "Address book icon"
-  },
   "advanced": {
     "message": "Advanced"
   },

app/_locales/es/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "Dirección"
   },
-  "addressBookIcon": {
-    "message": "Icono de libreta de direcciones"
-  },
   "advanced": {
     "message": "Avanzado"
   },

app/_locales/es_419/messages.json

@@ -142,9 +142,6 @@
   "address": {
     "message": "Dirección"
   },
-  "addressBookIcon": {
-    "message": "Icono de libreta de direcciones"
-  },
   "advanced": {
     "message": "Avanzado"
   },

app/_locales/fr/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "Adresse"
   },
-  "addressBookIcon": {
-    "message": "Icône du carnet d’adresses"
-  },
   "advanced": {
     "message": "Paramètres avancés"
   },

app/_locales/hi/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "पता"
   },
-  "addressBookIcon": {
-    "message": "पता पुस्तिका आइकन"
-  },
   "advanced": {
     "message": "उन्नत"
   },

app/_locales/id/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "Alamat"
   },
-  "addressBookIcon": {
-    "message": "Ikon buku alamat"
-  },
   "advanced": {
     "message": "Lanjutan"
   },

app/_locales/it/messages.json

@@ -207,9 +207,6 @@
   "address": {
     "message": "Indirizzo"
   },
-  "addressBookIcon": {
-    "message": "Icona rubrica indirizzo"
-  },
   "advanced": {
     "message": "Avanzate"
   },

app/_locales/ja/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "アドレス"
   },
-  "addressBookIcon": {
-    "message": "アドレス帳アイコン"
-  },
   "advanced": {
     "message": "高度な設定"
   },

app/_locales/ko/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "주소"
   },
-  "addressBookIcon": {
-    "message": "주소록 아이콘"
-  },
   "advanced": {
     "message": "고급"
   },

app/_locales/pt/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "Endereço"
   },
-  "addressBookIcon": {
-    "message": "Ícone da agenda de endereços"
-  },
   "advanced": {
     "message": "Avançado"
   },

app/_locales/pt_BR/messages.json

@@ -142,9 +142,6 @@
   "address": {
     "message": "Endereço"
   },
-  "addressBookIcon": {
-    "message": "Ícone da agenda de endereços"
-  },
   "advanced": {
     "message": "Avançado"
   },

app/_locales/ru/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "Адрес"
   },
-  "addressBookIcon": {
-    "message": "Значок адресной книги"
-  },
   "advanced": {
     "message": "Дополнительно"
   },

app/_locales/tl/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "Address"
   },
-  "addressBookIcon": {
-    "message": "Icon ng address book"
-  },
   "advanced": {
     "message": "Makabago"
   },

app/_locales/tr/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "Adres"
   },
-  "addressBookIcon": {
-    "message": "Adres defteri simgesi"
-  },
   "advanced": {
     "message": "Gelişmiş"
   },

app/_locales/vi/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "Địa chỉ"
   },
-  "addressBookIcon": {
-    "message": "Biểu tượng sổ địa chỉ"
-  },
   "advanced": {
     "message": "Nâng cao"
   },

app/_locales/zh_CN/messages.json

@@ -266,9 +266,6 @@
   "address": {
     "message": "地址"
   },
-  "addressBookIcon": {
-    "message": "地址簿图标"
-  },
   "advanced": {
     "message": "高级"
   },

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

@@ -24,7 +24,7 @@ export default {
         key: 'general',
       },
       {
-        icon: <i className="fa fa-address-book" />,
+        icon: <Icon name={ICON_NAMES.BOOK} />,
         content: 'Contacts',
         key: 'contacts',
       },

ui/helpers/constants/settings.js

@@ -145,7 +145,7 @@ export const SETTINGS_CONSTANTS = [
     sectionMessage: (t) => t('contacts'),
     descriptionMessage: (t) => t('contacts'),
     route: CONTACT_LIST_ROUTE,
-    icon: 'fa fa-address-book',
+    icon: ICON_NAMES.BOOK,
   },
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
   {

ui/pages/settings/contact-list-tab/contact-list-tab.component.js

@@ -11,6 +11,12 @@ import {
   getNumberOfSettingsInSection,
   handleSettingsRefs,
 } from '../../../helpers/utils/settings-search';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../../components/component-library';
+import { Color } from '../../../helpers/constants/design-system';
 import EditContact from './edit-contact';
 import AddContact from './add-contact';
 import ViewContact from './view-contact';
@@ -72,9 +78,11 @@ export default class ContactListTab extends Component {
     return (
       <div className="address-book__container">
         <div>
-          <i
+          <Icon
-            className="fa fa-address-book fa-4x address-book__icon"
+            name={ICON_NAMES.BOOK}
-            title={t('addressBookIcon')}
+            color={Color.iconMuted}
+            className="address-book__icon"
+            size={ICON_SIZES.XL}
           />
           <h4 className="address-book__title">{t('buildContactList')}</h4>
           <p className="address-book__sub-title">

ui/pages/settings/contact-list-tab/index.scss

@@ -56,9 +56,8 @@
   }
 
   &__icon {
-    margin-bottom: 16px;
+    margin: 0 auto 16px auto;
     display: block;
-    color: var(--color-icon-muted);
   }
 
   &__title {