Va-icon fill

[OlegFromOmsk]

Hello
How can I use fill option from material icons for va-icon?

[m0ksem]

Hi. You can extend Icons Config.

createApp(App)
  .use(VuesticPlugin, {
    icons: createIconsConfig({ 
      fonts: [
        {
          name: '{icon}-fill',
          resolve: ({ icon } => ({
            content: 'icon',
            class: 'material-symbols-outlined material-symbols-filled'
          }))
        }
      ] 
     })
  })
  .mount('#app')

<style>
.material-symbols-filled {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
</style>

Then any icon with -fill suffix will apply material-symbols-filled class.

<va-icon name="clock-fill" />

[OlegFromOmsk]

I have tried do this, but it doesn't work. Icon is filled

<i aria-hidden="true" notranslate="" class="va-icon material-icons material-symbols-outlined material-symbols-filled" style="font-size: 24px;">description</i>

<style>
.material-symbols-filled {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
</style>