Add material symbols support ?

[LoganTann]

It would be really cool to provide a way to import google's icons using the following configuration :

googleFonts: {
  // ref : https://fonts.google.com/icons
  icons: {
    filled: true,
    weight: 500,
    grade: 0,
    size: 20
  }
}

and then using the following code :

<p>
  Description icon : 
  <span class="material-symbols-outlined">description </span>
</p>

or even

<p>
  Description icon : 
  <material-icon>description</material-icon>
</p>

[ryansegus]

Sounds nice but this will download the variable or static icon?

In a nuxt 3 project I am using this configuration and it seems to work pretty well:

families: {
     ... /* main fonts */
     'Material Symbols Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200': true,
   },

Then on my CSS I have:

.material-symbols-outlined {

    &.-empty { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
 
    &.-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
 
    &.-slim { font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;  }
 }
 

Which allows me to use a reusable component with variants:

<script lang="ts" setup>
interface Props {
  icon: string
  variant?: '-empty' | '-filled' | '-slim'
}

const props = withDefaults(defineProps<Props>(), {
  variant: '-empty',
})
</script>

<template>
<span :class="['material-symbols-outlined', variant]">{{ icon }}</span>
</template>
  

So, it'll be nice to have this option to be able to get the variable font as well:

googleFonts: {
  // ref : https://fonts.google.com/icons
  icons: {
    filled: '0..1', // Maybe allowing number | string ?
    weight: '100..700',
    grade: '-50..200',
    size: '20...48'
  }
}