[Feature Request] Material Icons - Use "Rounded" style globally

[gduliscouet-ubitransport]

Problem to solve

Currently, it is very simple to integrate Material Icons and use it with the "Filled" style. But to use it with the "Rounded" style (same goes for "Outlined", "Sharp" and "Two tone"), a class needs to be added. It works for VIcons, even if it is not ideal, but it doesn't for the "icon prop" (like prepend-icon on the VTextField).

Our use case is that we want to use only the "Rounded" style in the whole app

Proposed solution

Have a global configuration to chose the prefered md icon style.

Maybe create "by-style" icon sets for that:

import { aliases, md-rounded } from 'vuetify/iconsets/md'

export default createVuetify({
  icons: {
    defaultSet: 'md-rounded',
    aliases,
    sets: {
      md-rounded,
    },
  },
})

I'm not familiar enough with the API to know if it is the best approach ?

[KaelWD]

You should be able to just copy this bit and reuse the aliases: https://github.com/vuetifyjs/vuetify/blob/d99b330aadc4f9d777957e42dd24b25dbd85aaf2/packages/vuetify/src/iconsets/md.ts#L48-L51

[gduliscouet-ubitransport]

Thanks @KaelWD, I was working on a workaround, I'm not sure it is great, but it is working:

I created a RoundIcon.vue:

<template>
    <component :is="tag" class="material-icons-round">{{ icon }}</component>
</template>

<script setup lang="ts">
// This component is a workaround for https://github.com/vuetifyjs/vuetify/issues/16961

defineProps<{
    icon: string
    tag: string
}>()
</script>

And used it:

        sets: {
            md: {
                component: RoundIcon,
            },
        },

Don't you still think we could have that in the lib ?