[Bug Report][3.1.1] v-icon puts imported mdi/js icon output into the class attribute of the element

[djurdjen]

Environment

Vuetify Version: 3.1.1 Vue Version: 3.2.45 Browsers: Chrome 108.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

• import @mdi/js
• import an icon like import { mdiAccount } from "@mdi/js"
• use the imported icon on v-icon like this: <v-icon :icon="mdiAccount" />

Expected Behavior

The v-icon component should output an element with an svg and path

Actual Behavior

The path is being added into the class attribute and the icon is not being rendered

Reproduction Link

https://codepen.io/djurdjen/pen/jOpmQPq?editors=101

Other comments

The provided codepen is a copy from the pen in the vuetify documentation (https://next.vuetifyjs.com/en/components/icons/)

[Ismaele-silla]

I don't know if this can help others, but I had the same issue, using "aliases" as written here: https://next.vuetifyjs.com/en/features/icon-fonts/#material-design-icons-js-svg It was my fault, though: instead of importing import { aliases, mdi } from "vuetify/iconsets/mdi-svg"; I was importing import { aliases, mdi } from "vuetify/iconsets/mdi"; Adding -svg and importing the right settings fixed the problem for me.

[djurdjen]

This seemed to do the trick! Thanks @Ismaele-silla !