CODEWITHSUNDEEP
vue.jsvuetify.js
Richard Hensman
Richard Hensman

Reputation: 560

Icons not displaying in Vuetify application

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

Upvotes: 1

Views: 9272

Answers (1)

runofthemillgeek
runofthemillgeek

Reputation: 1232

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.

Upvotes: 5

Related Questions