Fix icon inline-size for better compatibility with older browsers (#2142)

* Fix icon inline-size for better compatibility with older browsers

* added changeset

Author: Diaan

.changeset/smart-seas-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/icon': patch
+---
+
+Added a fallback for older browser because when the unit `cap` isn't supported. In those browsers the icons became VERY big.

packages/components/icon/src/icon.scss

@@ -6,12 +6,19 @@
   aspect-ratio: 1 / 1;
   display: inline-grid;
   flex-shrink: 0; // Prevent shrinking in flex containers
-  inline-size: max(1cap, var(--sl-icon-size));
+  inline-size: max(0.8em, var(--sl-icon-size));
   outline: none;
   place-content: center;
   translate: 0;
 }
 
+// There are some really old browsers that don't support `cap` yet, so we use a fallback with `em`.
+@supports (inline-size: 1cap) {
+  :host {
+    inline-size: max(1cap, var(--sl-icon-size));
+  }
+}
+
 :host([size='2xs']) {
   --sl-icon-size: var(--sl-size-125);
 }