Vuetify: [Bug Report] Icon documentation insufficient/Icons not appearing
Versions and Environment
Vuetify: 0.17.2
Vue: 2.5.8
Browsers: Safari 11.0
OS: Mac OS 10.12.6
Steps to reproduce
Try to create a v-icon with mdi or fa. Icons will not appear. (Not locally or in codepen)
Expected Behavior
I'd like to see a codepen link where the icons are showing, or updated documentation.
Actual Behavior
Icons do not appear.
Reproduction Link
https://codepen.io/anon/pen/LOddqJ, https://codepen.io/pen/?&editors=100
Craz1k0ek
All 7 comments
I agree that the documentation could be improved in this area. Usually the trick is to use underscores instead of dashes when referencing the icons, e.g.
<v-icon>mdi_watch</v-icon>
pdcamilleri
on 22 Nov 2017
https://vuetifyjs.com/components/icons#example-3
Please note that you still need to include the MDI icons in your project.
The way the codepens are generated means that it is not currently possible for us to include other libraries, but if you set up your project correctly then it should work fine.
@pdcamilleri Do not use an underscore, that uses the default (material icons, not mdi) icon set.
KaelWD
on 22 Nov 2017
Material icons are clearly imported in codepen (take a look at the css links); you can tell it is working by adding <i class="material-icons">wb_cloudy</i> In codepen the icon now appears. The underscore does work for some icons, yet the existing ones remain the same.
Plus documentation is outdated. As far as I know, there is no such thing as a 'mdi_xbox_controller' in materialize icons, unless you've added it yourself. And icons do work without the mdi- or mdi_ in front.
Craz1k0ek
on 22 Nov 2017
MDI is Material Design Icons, it's not same as Material Icons. And there is xbox-controller icon:
jacekkarczmarczyk
on 22 Nov 2017
The default icon set is google's own Material Icons, it uses font ligatures and does not require a prefix.
Material Design Icons (MDI) are a third-party icon font that uses classes instead of ligatures. They should be prefixed with mdi- in vuetify.
v-icon looks for that prefix to determine if it should use a css class-based or ligature-based font. Using the wrong prefix will try to render the default ligature font, resulting in unwanted whitespace if you have extra characters such as mdi_.
To use anything other than google's icons in the codepen templates, you have to link it yourself.
KaelWD
on 22 Nov 2017
awemulya
on 3 Aug 2018
For clarity here is the list of icons using mdi-*
neoricalex
on 22 Dec 2018
Related issues
SteffenDE
路
3Comments
KuroThing
路
3Comments
Antway
路
3Comments
radicaled
路
3Comments
sebastianmacias
路
3Comments
Most helpful comment
The default icon set is google's own Material Icons, it uses font ligatures and does not require a prefix.
Material Design Icons (MDI) are a third-party icon font that uses classes instead of ligatures. They should be prefixed with
mdi-in vuetify.v-iconlooks for that prefix to determine if it should use a css class-based or ligature-based font. Using the wrong prefix will try to render the default ligature font, resulting in unwanted whitespace if you have extra characters such asmdi_.To use anything other than google's icons in the codepen templates, you have to link it yourself.