fix(icon): update icon component to use Material Symbols Rounded and improve accessibility

Author: devbyray

packages/components/icon/README.md

@@ -10,6 +10,22 @@ pnpm add @devbyray/vue-wc-icon
 yarn add @devbyray/vue-wc-icon
 ```
 
+You have to load the Google Material Icon font yourself via HTML or CSS:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded');
+```
+
+```html
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" />
+```
+
+_This is because the components are web components and work with a Shadow DOM._
+
+## Available Icons
+
+This component uses Google Material Icons. You can find all available icons in the [Material Icons Library](https://fonts.google.com/icons?selected=Material+Icons).
+
 ## Usage
 
 ```html
@@ -36,9 +52,9 @@ import '@devbyray/vue-wc-icon';
 <vwc-icon name="delete" label="Delete item"></vwc-icon>
 ```
 
-## Available Icons
 
-This component uses Google Material Icons. You can find all available icons in the [Material Icons Library](https://fonts.google.com/icons?selected=Material+Icons).
+
+
 
 ## Props
 

packages/components/icon/src/Icon.ce.vue

@@ -1,13 +1,7 @@
 <template>
-  <span
-    :id="props.id"
-    class="vwc-icon"
-    :class="[props.size, { 'vwc-icon-spin': props.spin }]"
-    :aria-hidden="!props.label"
-    :aria-label="props.label"
-    :role="props.label ? 'img' : undefined"
-  >
-    <span class="material-icons" :style="iconStyles">{{ props.name }}</span>
+  <span :id="props.id" class="vwc-icon" :class="[props.size, { 'vwc-icon-spin': props.spin }]"
+    :aria-hidden="!props.label" :aria-label="props.label" :role="props.label ? 'img' : undefined">
+    <span class="material-symbols" :style="iconStyles">{{ props.name }}</span>
   </span>
 </template>
 
@@ -47,13 +41,15 @@ const props = withDefaults(defineProps<IconProps>(), {
 const iconStyles = computed(() => {
   return {
     color: props.color || 'currentColor',
+    'font-variation-settings': "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24",
   };
 });
 </script>
 
 <style>
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-
+.material-symbols {
+  font-family: var(--vwc-icon-font-family, 'Material Symbols Rounded');
+}
 .vwc-icon {
   display: inline-flex;
   align-items: center;
@@ -85,6 +81,7 @@ const iconStyles = computed(() => {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }