Vuetify Version: 2.0.5
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Windows 10
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.
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.
You have to manually install icons for Vuetify. In version 1.5 icons were provided out of the box.
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?
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?