Vuetify: [Feature Request] mdiSvg confusion

[tuath]

Problem to solve

Confusion about using the MDISVG icon set for vuetify

Proposed solution

1 - modify the icons page to mention that when using mdisvg, that vuetify does not need a dependency of @mdi/js because the svg paths for the icons that vuetify requires were hardcoded...
2 - modify v-icon's documentation to say that the default slot for a svg v-icon has to contain a svg path for it to work
3 - modify v-icon's behavior so that if it sees in the default-slot : mdiSvg- it will generate the code to load the path for the svg automatically. I understand we might need to import each svg so that webpack includes them. Might not be possible dynamically...

[darylteo]

Just piggy backing on this.

The docs say to use $vuetify.icons.xxxx to retrieve the svg path that has been set via new Vuetify(options) but upon testing and inspection, it is available only at $vuetify.icons.values.xxxx instead.

Don't have a fiddle to repro as it requires server side compilation with @mdi/js

[sve-odoo]

I didn't understand how to use default MDI SVG icons after reading the docs, so I came here but I must admit after reading your proposed solution it's still not clear to me :(

Should I install a NPM dependency? Should I import something in my components?

[darylteo]

@sve-odoo here's what I have.

import {
    mdiArrowLeft,
    mdiCalendar,
    mdiClockOutline,
    mdiClose,
    mdiDotsHorizontal,
    mdiHome,
    mdiMagnify,
    mdiMenu,
    mdiMenuDown,
    mdiPlay,
    mdiPollBox,
    mdiSend,
} from '@mdi/js';

//...

Vue.use(Vuetify);

export default new Vuetify({
    icons: {
        iconfont: 'mdiSvg',
        values: {
            mdiArrowLeft,
            mdiCalendar,
            mdiClockOutline,
            mdiClose,
            mdiDotsHorizontal,
            mdiHome,
            mdiMagnify,
            mdiMenu,
            mdiMenuDown,
            mdiPlay,
            mdiPollBox,
            mdiSend,
        },
    },
}

// usages
<v-text-field 
  :prepend-icon="$vuetify.icons.values.mdiCalendar"
></v-text-field>

<v-icon>{{$vuetify.icons.values.mdiArrowLeft}}</v-icon>

[tamirvs]

@darylteo Thanks, I couldn't figure out how to use it until your example. I found out you can simplify it:
<v-icon>$mdiArrowLeft</v-icon>

[Kasheftin]

I can confirm that using {{ $vuetify.icons.menu }} does not work for me either, while {{ $vuetify.icons.values.menu }} works. I use @mdi/js and the config like above.

[NitradoJustus]

Slightly related issue - sorry no time for creating a reproduction for the issue wizard (so this is already closed)!
https://github.com/vuetifyjs/vuetify/issues/11320

Hoping for improved docs about Iconfont configuration and TypeScript aswell before transitioning to mdiSvg.

[jacekkarczmarczyk]

@NitradoJustus it works for me (on TS 3.9 currently, but I guess 3.8 would work too), that's why reproduction is required to see if it's not related to your setup