Updating Icon types and component to use TS Box component

ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap

@@ -28,7 +28,7 @@ exports[`Beta Header should match snapshot 1`] = `
       data-testid="beta-header-close"
     >
       <span
-        class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
+        class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
         style="mask-image: url('./images/icons/close.svg');"
       />
     </button>

ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap

@@ -14,7 +14,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
         style="visibility: hidden;"
       >
         <span
-          class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
+          class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
           style="mask-image: url('./images/icons/arrow-left.svg');"
         />
         <span

ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap

@@ -42,7 +42,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
                       tabindex="0"
                     >
                       <span
-                        class="box mm-icon mm-icon--size-inherit box--display-inline-block box--flex-direction-row box--color-inherit"
+                        class="mm-box mm-icon mm-icon--size-inherit mm-box--display-inline-block mm-box--color-inherit"
                         style="mask-image: url('./images/icons/question.svg');"
                       />
                     </div>

ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap

@@ -10,7 +10,7 @@ exports[`LedgerInstructionField Component rendering should render properly with
         class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-info box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-primary-muted box--rounded-sm"
       >
         <span
-          class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-primary-default"
+          class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-primary-default"
           style="mask-image: url('./images/icons/info.svg');"
         />
         <div>

ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap

@@ -24,7 +24,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
             class="box mm-button-icon mm-button-icon--size-sm customize-nonce-modal__close box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
           >
             <span
-              class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
               style="mask-image: url('./images/icons/close.svg');"
             />
           </button>

ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap

@@ -9,15 +9,15 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
       class="box box--margin-bottom-4 box--display-flex box--flex-direction-row box--justify-content-center"
     >
       <span
-        class="box eth-sign-modal__warning-icon mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
+        class="mm-box eth-sign-modal__warning-icon mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
         style="mask-image: url('./images/icons/danger.svg');"
       />
       <button
         aria-label="Close"
         class="box mm-button-icon mm-button-icon--size-sm eth-sign-modal__close box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
       >
         <span
-          class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
+          class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
           style="mask-image: url('./images/icons/close.svg');"
         />
       </button>
@@ -44,7 +44,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
       class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-6 box--margin-bottom-6 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
     >
       <span
-        class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
+        class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
         style="mask-image: url('./images/icons/danger.svg');"
       />
       <div>

ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap

@@ -105,7 +105,7 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
         class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-5 box--margin-left-5 box--padding-1 box--sm:padding-3 box--lg:padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
       >
         <span
-          class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
+          class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
           style="mask-image: url('./images/icons/danger.svg');"
         />
         <div>

ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap

@@ -12,7 +12,7 @@ exports[`Transaction Confirmed should match snapshot 1`] = `
         class="transaction-confirmed__content"
       >
         <span
-          class="box mm-icon mm-icon--size-xl box--display-inline-block box--flex-direction-row box--color-success-default"
+          class="mm-box mm-icon mm-icon--size-xl mm-box--display-inline-block mm-box--color-success-default"
           style="mask-image: url('./images/icons/check.svg');"
         />
         <div

ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap

@@ -9,7 +9,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
       class="asset-breadcrumb"
     >
       <span
-        class="box mm-icon mm-icon--size-xs box--margin-inline-end-3 box--display-inline-block box--flex-direction-row box--color-inherit"
+        class="mm-box mm-icon mm-icon--size-xs mm-box--margin-inline-end-3 mm-box--display-inline-block mm-box--color-inherit"
         data-testid="asset__back"
         style="mask-image: url('./images/icons/arrow-left.svg');"
       />
@@ -30,7 +30,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
         data-testid="nft-options__button"
       >
         <span
-          class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
+          class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
           style="mask-image: url('./images/icons/more-vertical.svg');"
         />
       </button>
@@ -195,7 +195,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
                 data-testid="nft-address-copy"
               >
                 <span
-                  class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
+                  class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
                   style="mask-image: url('./images/icons/copy.svg');"
                 />
               </button>

ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap

@@ -6,7 +6,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
     class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
   >
     <span
-      class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
+      class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
       style="mask-image: url('./images/icons/danger.svg');"
     />
     <div>
@@ -34,7 +34,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
               [seeDetails]
             </p>
             <span
-              class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-start-2 box--display-inline-block box--flex-direction-row box--color-primary-default"
+              class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-start-2 mm-box--display-inline-block mm-box--color-primary-default"
               style="mask-image: url('./images/icons/arrow-up.svg');"
             />
           </summary>
@@ -62,7 +62,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
         class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
       >
         <span
-          class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
+          class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
           style="mask-image: url('./images/icons/security-tick.svg');"
         />
         [securityProviderAdviceBy]

ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap

@@ -5,7 +5,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when ppomResponse.resul
   class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
 >
   <span
-    class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
+    class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
     style="mask-image: url('./images/icons/danger.svg');"
   />
   <div>
@@ -24,7 +24,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when ppomResponse.resul
       class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
     >
       <span
-        class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
+        class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
         style="mask-image: url('./images/icons/security-tick.svg');"
       />
       <span>
@@ -51,7 +51,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when ppomResponse.resu
   class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
 >
   <span
-    class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-warning-default"
+    class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
     style="mask-image: url('./images/icons/warning.svg');"
   />
   <div>
@@ -70,7 +70,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when ppomResponse.resu
       class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
     >
       <span
-        class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
+        class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
         style="mask-image: url('./images/icons/security-tick.svg');"
       />
       <span>
@@ -98,7 +98,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
     class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
   >
     <span
-      class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-warning-default"
+      class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
       style="mask-image: url('./images/icons/warning.svg');"
     />
     <div>
@@ -126,7 +126,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
               See details
             </p>
             <span
-              class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-start-2 box--display-inline-block box--flex-direction-row box--color-primary-default"
+              class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-start-2 mm-box--display-inline-block mm-box--color-primary-default"
               style="mask-image: url('./images/icons/arrow-up.svg');"
             />
           </summary>
@@ -155,7 +155,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
         class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
       >
         <span
-          class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
+          class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
           style="mask-image: url('./images/icons/security-tick.svg');"
         />
         <span>

ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap

@@ -33,7 +33,7 @@ exports[`SelectedAccount Component should match snapshot 1`] = `
               class="selected-account__copy"
             >
               <span
-                class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-alternative"
+                class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-alternative"
                 style="mask-image: url('./images/icons/copy.svg');"
               />
             </div>

ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap

@@ -185,7 +185,7 @@ exports[`Signature Request Component render should match snapshot when we are us
             class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <span
-              class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
+              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-default"
               style="mask-image: url('./images/icons/global.svg');"
             />
           </div>
@@ -960,7 +960,7 @@ exports[`Signature Request Component render should match snapshot when we want t
             class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <span
-              class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
+              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-default"
               style="mask-image: url('./images/icons/global.svg');"
             />
           </div>

ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap

@@ -20,7 +20,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
           class="transaction-activity-log-icon transaction-activity-log__activity-icon"
         >
           <span
-            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
+            class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
             style="mask-image: url('./images/icons/add.svg');"
           />
         </div>
@@ -42,7 +42,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
           class="transaction-activity-log-icon transaction-activity-log__activity-icon"
         >
           <span
-            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
+            class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
             style="mask-image: url('./images/icons/arrow-up.svg');"
           />
         </div>
@@ -64,7 +64,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
           class="transaction-activity-log-icon transaction-activity-log__activity-icon"
         >
           <span
-            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
+            class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
             style="mask-image: url('./images/icons/programming-arrows.svg');"
           />
         </div>
@@ -86,7 +86,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
           class="transaction-activity-log-icon transaction-activity-log__activity-icon"
         >
           <span
-            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
+            class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
             style="mask-image: url('./images/icons/check.svg');"
           />
         </div>

ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap

@@ -7,7 +7,7 @@ exports[`AvatarFavicon should render correctly 1`] = `
     data-testid="avatar-favicon"
   >
     <span
-      class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
+      class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-default"
       style="mask-image: url('./images/icons/global.svg');"
     />
   </div>

ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap

@@ -7,7 +7,7 @@ exports[`AvatarIcon should render correctly 1`] = `
     data-testid="avatar-icon"
   >
     <span
-      class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
+      class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
       style="mask-image: url('./images/icons/swap-horizontal.svg');"
     />
   </div>

ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap

@@ -7,7 +7,7 @@ exports[`BannerAlert should render BannerAlert element correctly 1`] = `
     data-testid="bannerAlert"
   >
     <span
-      class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-primary-default"
+      class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-primary-default"
       style="mask-image: url('./images/icons/info.svg');"
     />
     <div>

ui/components/component-library/button-icon/__snapshots__/button-icon.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`ButtonIcon should render button element correctly 1`] = `
     data-testid="button-icon"
   >
     <span
-      class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
+      class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
       style="mask-image: url('./images/icons/add-square.svg');"
     />
   </button>