fix(future/Icon): copy CDN styles to internal styles (#5241)

.changeset/afraid-schools-cover.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Update future Icon to only use internal styles as opposed to global styles from the CDN.

.stylelintrc-css.mjs

@@ -5,5 +5,11 @@ export default {
   rules: {
     "selector-class-pattern": null,
     "color-function-notation": ["modern", { ignore: ["with-var-inside"] }],
+    "font-family-no-missing-generic-family-keyword": [
+      true,
+      {
+        ignoreFontFamilies: ["Material Symbols Outlined"],
+      },
+    ],
   },
 }

packages/components/src/__future__/Icon/Icon.module.css

@@ -1,3 +1,21 @@
+/*
+ * This is taken from the Material Symbols CDN
+ * font-weight & font-size removed as overridden in .icon
+ */
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
+
 .icon {
   font-size: calc(1px * var(--icon-size, 20));
   font-weight: var(--icon-font-weight, 400);

packages/components/src/__future__/Icon/Icon.tsx

@@ -34,7 +34,7 @@ const MaterialIcon = ({
 }: MaterialIconProps): JSX.Element => (
   <span
     className={classNames(
-      "material-symbols-outlined",
+      styles["material-symbols-outlined"],
       styles.icon,
       isFilled && styles.filled,
       className