nuxt icon indicating copy to clipboard operation
nuxt copied to clipboard

Iconfont Configuration Doesn't Reflect the Icon on Nuxt

Open jefrydco opened this issue 6 years ago • 4 comments

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:

jefrydco avatar Oct 25 '18 00:10 jefrydco

@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

Codefa avatar Oct 25 '18 04:10 Codefa

@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.

jefrydco avatar Oct 25 '18 06:10 jefrydco

@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>

Codefa avatar Oct 25 '18 06:10 Codefa

@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.

jefrydco avatar Oct 25 '18 08:10 jefrydco