vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.88k stars 6.96k forks source link

[Bug Report][3.3.2] :icon="..." does not work with @mdi/js #17529

Closed nwtgck closed 1 year ago

nwtgck commented 1 year ago

Hi!

Thank you so much for the beautiful project!

Environment

Vuetify Version: 3.3.2 Vue Version: 3.3.4 Browsers: Firefox 113.0 OS: Mac OS 10.15

Steps to reproduce

npm install @mdi/js -D and use <v-icon :icon="mdiAccount" /> The instruction is here: https://vuetifyjs.com/en/features/icon-fonts/

My workaround is using a string array [mdiAccount] instead of mdiAccount. The array works because: https://github.com/vuetifyjs/vuetify/blob/9437361d89d595f9c28e1d732b24c2b38bf7fa86/packages/vuetify/src/composables/icons.tsx#L221-L225

Expected Behavior

Show icon

Actual Behavior

Not show icon

image

Reproduction Link

https://codesandbox.io/s/nwtgck-vuetify3-mdi-js-icon-m0pl8t?file=/src/App.vue

websitevirtuoso commented 1 year ago

you should use import -to imprort this icon. It works 100%. try one more time

KaelWD commented 1 year ago

You're missing the createVuetify part from https://vuetifyjs.com/en/features/icon-fonts/#material-design-icons-js-svg

nwtgck commented 1 year ago

Thanks!