Icons not displaying in Vuetify application

Question

I have created a Vue.js application with Vuetify, however when I use the v-icon component the alternative text is displayed as opposed to the icon.

I have created my application following the quick start guide on the Vuetify website.

$  vue -V
@vue/cli 4.1.2

vue create my-app
cd my-app
$ vue add vuetify

I then simply add home to src/components/HelloWorld.vue.

<template>
  <v-container>

    <v-icon>home</v-icon>

  </v-container>
</template>

<script>
export default {
  name: 'HelloWorld',

  data: () => ({
  }),
};
</script>

When I run the application the word Home is displayed as opposed to the icon

Can you show an example of the markup you're using to add the icon? — Tanner, Jan 20 '20 at 14:08
Does this answer your question? [vuetify icon not showing](https://stackoverflow.com/questions/57053728/vuetify-icon-not-showing) — Matheus Valenza, Jan 21 '20 at 19:01
@Tanner I have added the code from src/components/HelloWorld.vue — Richard Hensman, Jan 21 '20 at 19:14
Try `mdi-home` instead of just `home` Docs: https://vuetifyjs.com/en/components/icons — Tanner, Jan 21 '20 at 19:34

score 5 · Accepted Answer · answered Jan 21 '20 at 19:34

Follow the instructions here to install and use Material icons: https://vuetifyjs.com/en/customization/icons#install-material-icons

Alternatively, you could use the default Material Design icons (yes, they're both different) and change your code to:

<v-icon>mdi-home</v-icon>

to use the icon from the default Material Design icons set.

Icons not displaying in Vuetify application

1 Answers1

Linked