search

vuetifyjs / nuxt

Nuxt.js + Vuetify.js starter project template.
MIT License
306 stars 109 forks source link

Iconfont Configuration Doesn't Reflect the Icon on Nuxt #68

Open jefrydco opened 5 years ago

jefrydco commented 5 years ago

Versions and Environment

Vuetify: 1.2.6 Vue: 2.5.17 Browsers: 70.0.3538.67 (Official Build) (64-bit) OS: Fedora 28

Previously worked in:

Vuetify: Vue:

Steps to reproduce

Add iconfont configuration as nuxt plugin.

Expected Behavior

Iconfont configuration reflects the icon.

Actual Behavior

Iconfont configuration doesn't reflect the icon.

Reproduction Link

https://codesandbox.io/s/github/jefrydco/vuetify-mdi-icon

Additional Comments:

Codefa commented 5 years ago

@jefrydco to fix thi atleast for now you need to install a dependency " material-design-icons-iconfont " and import it to the plugins it will works

working demo https://codesandbox.io/s/lxqjmo7l1l

jefrydco commented 5 years ago

@Codefa Take a look this https://github.com/vuetifyjs/vuetify/blob/dev/src/components/Vuetify/mixins/icons.js, I thought the mdi value for iconfont should be fine if I just add the @mdi/font packages.

And the material-design-icons-iconfont dependency actually the default icon used in vuetify. On this repo that package is loaded manually through the head section.

Codefa commented 5 years ago

@jefrydco another way is use the mdi-iconName inside the v-icon tag without adding material-design-icons-iconfont don't know why this works as per the docs in the official site <v-icon>mdi-menu</v-icon>

jefrydco commented 5 years ago

@Codefa Yup, actually including @mdi/font package will be worked by adding prefix to icon name, but one thing I consider is, the default icon used by vuetify like hamburger menu doesnt change into mdi-prefixed after I configure iconfont to mdi.