Vuetify: [Bug Report] Icons are not showing after creating new project with Vue CLI and adding Vuetify

Created on 6 Aug 2019  路  2Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.0.5
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Windows 10

Steps to reproduce

  1. Create a new project using vue CLI
  2. vue create my-project
  3. Add vuetify
  4. vue add vuetify
  5. Add a text-field with an icon like this.

    <v-text-field
        label="Prepend"
        prepend-icon="place"
      ></v-text-field>
    

Icons are not showing. Instead we can see big text with an icon name.

Expected Behavior

This problem was described here:

https://github.com/vuetifyjs/vuetify/issues/2083

Unfortunately it was not solved. It can be solved using @bakossandor solution, but personally I think that icons in Vuetify should work out of the box without installing anything.

Actual Behavior

You have to manually install icons for Vuetify. In version 1.5 icons were provided out of the box.

Reproduction Link

https://codepen.io

invalid layer 8 issue

Most helpful comment

This could be made more clear - I have used vuetify for years but first time installing with vue-cli today - it wasn't until I checked solved issues and found this that I managed to figure it out. Not a huge visual difference between icon sets names so this is going to trip newcomers up.

Perhaps a note in the 'install with vue-cli' area of the documentation?

All 2 comments

You haven't specified which icon font you have chosen during the installation of Vuetify, I'm assuming that you've selected the default settings which means that MDI icons have been installed (that has changed in 2.0, 1.5 used Material Icons by default, now it's MDI) and therefore you should use MDI icons (which needs mdi- prefix). In the code snippet you've provided you're using Material Icons, that's why you don't see them.

Please provide the reproduction (can be github repo) or more detailed description of how you install Vuetify if I'm wrong

If you have any additional questions, please reach out to us in our Discord community.

This could be made more clear - I have used vuetify for years but first time installing with vue-cli today - it wasn't until I checked solved issues and found this that I managed to figure it out. Not a huge visual difference between icon sets names so this is going to trip newcomers up.

Perhaps a note in the 'install with vue-cli' area of the documentation?

Was this page helpful?
0 / 5 - 0 ratings