Auto Import icons

[KareemDa]

I'm using a bunch of MDI icons in my project.

So firstly. I've imported all icons. Now I want to reduce size of the bundle by importing only used icons. Is there any way to import them automatically ?

[klausXR]

Bump, is there any way to use dynamic imports with this library?

[Templarian]

We have solution coded for the new MDI website that we want to bundle and share eventually, but right now other than copying @mdi/svg to your assets folder and fetching them there is not a nice solution.

Until then there is no out of the box solution to this problem for those that need dynamic access to any icon during runtime.

[klausXR]

Is there an ETA or is it not a high priority one?

[Templarian]

@klausXR Unfortunately I haven't had a lot of free time. Our solution relies on a 3rd party IndexedDB library that is a bit heavy for those using it for simple caching icons. It's on my list of things to code, but I would rank it lower priority.

[samehdoush]

any solution ? i tried : vue 3

vite 4

vuetify 3

const getIcon = async (iconName) => {
    return { [iconName]: icon } = await import('@mdi/js')
}

<template>
    <Suspense>
    <v-icon >

      {{ getIcon('mdiAccount') }}
    </v-icon>
</Suspense>
</template>

Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "async () =\u003E {\r\n …".