Fix icon size

cultureamp · Nov 7, 2024 · c839349 · c839349
1 parent 75c06ad
commit c839349
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/.changeset/purple-hairs-deliver.md b/.changeset/purple-hairs-deliver.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Fix icon-size
diff --git a/packages/components/src/__future__/Icon/Icon.module.css b/packages/components/src/__future__/Icon/Icon.module.css
@@ -10,6 +10,18 @@
     "opsz" var(--icon-optical-size, var(--icon-size, 20));
 }
 
+.icon.IconOverride {
+  font-size: calc(1px * var(--icon-size, 20));
+  font-weight: var(--icon-font-weight, 400);
+  vertical-align: var(--icon-vertical-align);
+
+  /* Must use vars otherwise whole attribute must be set again */
+  font-variation-settings:
+    "FILL" var(--icon-fill, 0),
+    "GRAD" var(--icon-grade, 0),
+    "opsz" var(--icon-optical-size, var(--icon-size, 20));
+}
+
 .filled {
   --icon-fill: 1;
 }

diff --git a/packages/components/src/__future__/Icon/Icon.tsx b/packages/components/src/__future__/Icon/Icon.tsx
@@ -36,6 +36,7 @@ const MaterialIcon = ({
     className={classNames(
       "material-symbols-outlined",
       styles.icon,
+      "IconOverride",
       isFilled && styles.filled,
       className
     )}