improvement: add Material Icons variants

We would like to use the Outlined variant of Material Icons, but currently only the Filled variant is available. Added variant property to Icon and support for other variants.
42BV · Jun 28, 2024 · f2c3cfd · f2c3cfd
1 parent 7421948
commit f2c3cfd
Show file tree

Hide file tree

Showing 46 changed files with 939 additions and 263 deletions.
diff --git a/src/core/AsyncContent/__snapshots__/AsyncContent.test.tsx.snap b/src/core/AsyncContent/__snapshots__/AsyncContent.test.tsx.snap
diff --git a/src/core/BooleanIcon/__snapshots__/BooleanIcon.test.tsx.snap b/src/core/BooleanIcon/__snapshots__/BooleanIcon.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Component: BooleanIcon ui value false 1`] = `
 <div>
   <i
-    class="icon material-icons"
+    class="icon material-icons material-icons__filled"
   >
     check_box_outline_blank
   </i>
@@ -13,7 +13,7 @@ exports[`Component: BooleanIcon ui value false 1`] = `
 exports[`Component: BooleanIcon ui value true 1`] = `
 <div>
   <i
-    class="icon material-icons"
+    class="icon material-icons material-icons__filled"
   >
     check_box
   </i>

diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap
@@ -221,7 +221,7 @@ exports[`Component: Button ui button with icon normal inProgress is false 1`] =
         class="d-flex justify-content-center align-items-center"
       >
         <i
-          class="icon button-icon me-2 material-icons"
+          class="icon material-icons material-icons__filled button-icon me-2"
         >
           save
         </i>
@@ -283,7 +283,7 @@ exports[`Component: Button ui button with icon normal with icon on the right 1`]
       >
         Save
         <i
-          class="icon button-icon ms-2 material-icons"
+          class="icon material-icons material-icons__filled button-icon ms-2"
         >
           save
         </i>
@@ -306,7 +306,7 @@ exports[`Component: Button ui button with icon outline inProgress is false 1`] =
         class="d-flex justify-content-center align-items-center"
       >
         <i
-          class="icon button-icon me-2 material-icons"
+          class="icon material-icons material-icons__filled button-icon me-2"
         >
           save
         </i>
@@ -360,7 +360,7 @@ exports[`Component: Button ui icon only disabled is disabled 1`] = `
     class="button primary d-inline-block"
   >
     <i
-      class="icon material-icons text-primary icon--disabled"
+      class="icon material-icons material-icons__filled text-primary icon--disabled"
       style="font-size: 24px;"
     >
       save
@@ -375,7 +375,7 @@ exports[`Component: Button ui icon only disabled is enabled 1`] = `
     class="button primary d-inline-block"
   >
     <i
-      class="icon material-icons text-primary clickable"
+      class="icon material-icons material-icons__filled text-primary clickable"
       style="font-size: 24px;"
     >
       save
@@ -390,7 +390,7 @@ exports[`Component: Button ui icon only full-width full width and icon left 1`]
     class="button primary d-flex justify-content-start"
   >
     <i
-      class="icon material-icons text-primary clickable"
+      class="icon material-icons material-icons__filled text-primary clickable"
       style="font-size: 24px;"
     >
       save
@@ -405,7 +405,7 @@ exports[`Component: Button ui icon only full-width full width and icon right 1`]
     class="button primary d-flex justify-content-end"
   >
     <i
-      class="icon material-icons text-primary clickable"
+      class="icon material-icons material-icons__filled text-primary clickable"
       style="font-size: 24px;"
     >
       save
@@ -420,7 +420,7 @@ exports[`Component: Button ui icon only inProgress inProgress is false 1`] = `
     class="button primary d-inline-block"
   >
     <i
-      class="icon material-icons text-primary clickable"
+      class="icon material-icons material-icons__filled text-primary clickable"
       style="font-size: 24px;"
     >
       save
@@ -461,7 +461,7 @@ exports[`Component: Button ui icon only that when no icon is provided it will fa
     class="button primary d-inline-block"
   >
     <i
-      class="icon material-icons text-primary clickable"
+      class="icon material-icons material-icons__filled text-primary clickable"
       style="font-size: 24px;"
     >
       block

diff --git a/src/core/CardOpenClose/__snapshots__/CardOpenClose.test.tsx.snap b/src/core/CardOpenClose/__snapshots__/CardOpenClose.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Component: CardOpenClose ui open 1`] = `
     >
       click this
       <i
-        class="icon open-close is-open material-icons"
+        class="icon material-icons material-icons__filled open-close is-open"
       >
         expand_more
       </i>

diff --git a/src/core/ConfirmButton/__snapshots__/ConfirmButton.test.tsx.snap b/src/core/ConfirmButton/__snapshots__/ConfirmButton.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`Component: ConfirmButton ui button and icon 1`] = `
         class="d-flex justify-content-center align-items-center"
       >
         <i
-          class="icon button-icon me-2 material-icons"
+          class="icon material-icons material-icons__filled button-icon me-2"
         >
           delete
         </i>
@@ -37,7 +37,7 @@ exports[`Component: ConfirmButton ui custom class, color and texts 1`] = `
         class="d-flex justify-content-center align-items-center"
       >
         <i
-          class="icon button-icon me-2 material-icons"
+          class="icon material-icons material-icons__filled button-icon me-2"
         >
           delete
         </i>
@@ -73,7 +73,7 @@ exports[`Component: ConfirmButton ui only icon 1`] = `
     class="button danger d-inline-block"
   >
     <i
-      class="icon material-icons text-danger clickable"
+      class="icon material-icons material-icons__filled text-danger clickable"
       style="font-size: 24px;"
     >
       delete

diff --git a/src/core/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap b/src/core/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`Component: ConfirmModal ui custom texts 1`] = `
                   class="d-flex justify-content-center align-items-center"
                 >
                   <i
-                    class="icon button-icon me-2 material-icons"
+                    class="icon material-icons material-icons__filled button-icon me-2"
                   >
                     close
                   </i>
@@ -80,7 +80,7 @@ exports[`Component: ConfirmModal ui custom texts 1`] = `
                   class="d-flex justify-content-center align-items-center"
                 >
                   <i
-                    class="icon button-icon me-2 material-icons"
+                    class="icon material-icons material-icons__filled button-icon me-2"
                   >
                     check
                   </i>
@@ -160,7 +160,7 @@ exports[`Component: ConfirmModal ui default texts 1`] = `
                   class="d-flex justify-content-center align-items-center"
                 >
                   <i
-                    class="icon button-icon me-2 material-icons"
+                    class="icon material-icons material-icons__filled button-icon me-2"
                   >
                     close
                   </i>
@@ -179,7 +179,7 @@ exports[`Component: ConfirmModal ui default texts 1`] = `
                   class="d-flex justify-content-center align-items-center"
                 >
                   <i
-                    class="icon button-icon me-2 material-icons"
+                    class="icon material-icons material-icons__filled button-icon me-2"
                   >
                     check
                   </i>