UX Icon: updated fa-exclamation-circle (#17879)

app/_locales/de/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 Der Contract könnte Ihr gesamtes Token-Guthaben ohne weitere Benachrichtigung oder Zustimmung ausgeben. Schützen Sie sich, indem Sie eine niedrigere Ausgabenobergrenze festlegen.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "Schwach"

app/_locales/el/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 Ο συμβαλλόμενος μπορεί να ξοδέψει ολόκληρο το υπόλοιπο των tokens σας χωρίς περαιτέρω ειδοποίηση ή συγκατάθεση. Προστατέψτε τον εαυτό σας προσαρμόζοντας ένα χαμηλότερο όριο δαπανών.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "Αδύναμος"

app/_locales/en/messages.json

@@ -4507,7 +4507,7 @@
   },
   "warningTooltipText": {
     "message": "$1 The contract could spend your entire token balance without further notice or consent. Protect yourself by customizing a lower spending cap.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "Weak"

app/_locales/es/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 El contrato podría gastar todo su saldo de tokens sin previo aviso o consentimiento. Protéjase personalizando un límite de gasto más bajo.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "Débil"

app/_locales/fr/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 L’autre partie au contrat peut dépenser la totalité de votre solde de jetons sans préavis et sans demander votre consentement. Protégez-vous en abaissant le plafond des dépenses.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "Faible"

app/_locales/hi/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 अनुबंध आगे की सूचना या सहमति के बिना आपकी संपूर्ण टोकन शेष राशि खर्च कर सकता है। कम खर्च करने की सीमा को समायोजित करके अपनी सुरक्षा करें।",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "कमज़ोर"

app/_locales/id/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 Kontrak dapat mempergunakan seluruh saldo token Anda tanpa pemberitahuan atau persetujuan lebih lanjut. Lindungi diri Anda dengan menyesuaikan batas pengeluaran yang lebih rendah.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "Lemah"

app/_locales/ja/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 このコントラクトは今後、通知や承諾なしにトークン残高全額を使用できます。使用限度をより低い金額にカスタマイズして、自分の身を守りましょう。",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "弱"

app/_locales/ko/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 계약은 추가 통보나 동의 없이도 남은 토큰 전체를 사용할 수 있습니다. 보호를 위해 최소 지출 한도를 설정하세요.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "약함"

app/_locales/pt/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 O contrato pode gastar todo o seu saldo de tokens sem aviso ou consentimento. Proteja-se personalizando um limite de gastos menor.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "Fraca"

app/_locales/ru/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 Контракт может потратить весь ваш баланс токенов без дополнительного уведомления или согласия. Защитите себя, установив более низкий лимит расходов.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "Слабый"

app/_locales/tl/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 Maaaring gastusin ng kontrata ang iyong buong balanse ng token nang walang karagdagang abiso o pahintulot. Protektahan ang iyong sarili sa pamamagitan ng pag-customize ng mas mababang limitasyon sa paggastos.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "Madali"

app/_locales/tr/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 Sözleşme, başkaca bildiri ya da rıza olmaksızın tüm token bakiyenizi harcayabilir. Düşük bir harcama limitini özelleştirerek kendinizi koruyun.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "Zayıf"

app/_locales/vi/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 Hợp đồng có thể chi tiêu toàn bộ số dư token của bạn mà không cần thông báo hoặc chấp thuận. Hãy tự bảo vệ chính mình bằng cách chỉnh hạn mức chi tiêu thấp hơn.",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "Yếu"

app/_locales/zh_CN/messages.json

@@ -4236,7 +4236,7 @@
   },
   "warningTooltipText": {
     "message": "$1 合约可能会花费您的全部代币余额，无需进一步通知或同意。请自定义较低的支出上限以保护自己。",
-    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+    "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour"
   },
   "weak": {
     "message": "弱"

ui/components/app/custom-spending-cap/custom-spending-cap.js

@@ -7,7 +7,7 @@ import { I18nContext } from '../../../contexts/i18n';
 import Box from '../../ui/box';
 import FormField from '../../ui/form-field';
 import Typography from '../../ui/typography';
-import { ButtonLink } from '../../component-library';
+import { ButtonLink, Icon, ICON_NAMES } from '../../component-library';
 import {
   AlignItems,
   DISPLAY,
@@ -151,7 +151,7 @@ export default function CustomSpendingCap({
           fontWeight={FONT_WEIGHT.BOLD}
           color={TextColor.errorDefault}
         >
-          <i className="fa fa-exclamation-circle" /> {t('beCareful')}
+          <Icon name={ICON_NAMES.WARNING} /> {t('beCareful')}
         </Typography>,
       ])
     : t('inputLogicEmptyState');

ui/components/app/flask/snap-content-footer/index.scss

@@ -1,9 +1,4 @@
 .snap-content-footer {
-  i {
-    color: var(--color-icon-muted);
-    padding-right: 4px;
-  }
-
   .button {
     white-space: nowrap;
     overflow: hidden;

ui/components/app/flask/snap-content-footer/snap-content-footer.js

@@ -11,9 +11,12 @@ import {
   JustifyContent,
   AlignItems,
   TextColor,
+  Size,
+  IconColor,
 } from '../../../../helpers/constants/design-system';
 import Button from '../../../ui/button';
 import Box from '../../../ui/box/box';
+import { Icon, ICON_NAMES } from '../../../component-library';
 
 export default function SnapContentFooter({ snapName, snapId }) {
   const t = useI18nContext();
@@ -32,7 +35,12 @@ export default function SnapContentFooter({ snapName, snapId }) {
       paddingBottom={4}
       className="snap-content-footer"
     >
-      <i className="fas fa-exclamation-circle fa-sm" />
+      <Icon
+        name={ICON_NAMES.WARNING}
+        size={Size.SM}
+        color={IconColor.iconMuted}
+        paddingRight={1}
+      />
       <Typography color={TextColor.textMuted} variant={TypographyVariant.H7}>
         {t('snapContent', [
           <Button type="inline" onClick={handleNameClick} key="button">

ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap

@@ -5,8 +5,9 @@ exports[`ErrorMessage Component should render a message from props.errorMessage
   <div
     class="error-message"
   >
-    <i
+    <span
-      class="fa fa-exclamation-circle error-message__icon"
+      class="box error-message__icon mm-icon mm-icon--size-sm box--margin-right-2 box--display-inline-block box--flex-direction-row box--color-error-default"
+      style="mask-image: url('./images/icons/warning.svg');"
     />
     <div
       class="error-message__text"
@@ -22,8 +23,9 @@ exports[`ErrorMessage Component should render a message translated from props.er
   <div
     class="error-message"
   >
-    <i
+    <span
-      class="fa fa-exclamation-circle error-message__icon"
+      class="box error-message__icon mm-icon mm-icon--size-sm box--margin-right-2 box--display-inline-block box--flex-direction-row box--color-error-default"
+      style="mask-image: url('./images/icons/warning.svg');"
     />
     <div
       class="error-message__text"

ui/components/ui/error-message/error-message.component.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Icon, ICON_NAMES } from '../../component-library';
+import { IconColor, Size } from '../../../helpers/constants/design-system';
 
 /**
  * @deprecated - Please use ActionableMessage type danger
@@ -15,7 +17,13 @@ const ErrorMessage = (props, context) => {
 
   return (
     <div className="error-message">
-      <i className="fa fa-exclamation-circle error-message__icon" />
+      <Icon
+        className="error-message__icon"
+        name={ICON_NAMES.WARNING}
+        size={Size.SM}
+        color={IconColor.errorDefault}
+        marginRight={2}
+      />
       <div className="error-message__text">{error}</div>
     </div>
   );

ui/components/ui/error-message/index.scss

@@ -11,12 +11,6 @@
   align-items: center;
   padding: 8px 10px;
 
-  &__icon {
-    margin-right: 8px;
-    flex: 0 0 auto;
-    color: var(--color-error-default);
-  }
-
   &__text {
     overflow: auto;
   }

ui/components/ui/review-spending-cap/index.scss

@@ -18,10 +18,6 @@
     align-self: center;
   }
 
-  i {
-    font-size: $font-size-h7;
-  }
-
   &__value {
     word-break: break-word;
   }

ui/components/ui/review-spending-cap/review-spending-cap.js

@@ -85,7 +85,10 @@ export default function ReviewSpendingCap({
                         fontWeight={FONT_WEIGHT.BOLD}
                         color={TextColor.errorDefault}
                       >
-                        <i className="fa fa-exclamation-circle" />{' '}
+                        <Icon
+                          name={ICON_NAMES.WARNING}
+                          style={{ verticalAlign: 'middle' }}
+                        />
                         {t('beCareful')}
                       </Typography>,
                     ])}

ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap

@@ -503,8 +503,9 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
         <div
           class="error-message"
         >
-          <i
+          <span
-            class="fa fa-exclamation-circle error-message__icon"
+            class="box error-message__icon mm-icon mm-icon--size-sm box--margin-right-2 box--display-inline-block box--flex-direction-row box--color-error-default"
+            style="mask-image: url('./images/icons/warning.svg');"
           />
           <div
             class="error-message__text"