Vuetify 应用程序中未显示图标答案

【问题标题】：Icons not displaying in Vuetify applicationVuetify 应用程序中未显示图标
【发布时间】：2020-01-20 14:06:00
【问题描述】：

我已经使用 Vuetify 创建了一个 Vue.js 应用程序，但是当我使用 v-icon 组件时，会显示替代文本而不是图标。

我按照 Vuetify 网站上的快速入门指南创建了我的应用程序。

$  vue -V
@vue/cli 4.1.2

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

然后我只需将 home 添加到 src/components/HelloWorld.vue。

<template>
  <v-container>

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

  </v-container>
</template>

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

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

当我运行应用程序时，会显示 Home 一词而不是图标

【问题讨论】：

你能举一个你用来添加图标的标记的例子吗？
这能回答你的问题吗？ vuetify icon not showing
@Tanner 我已经添加了来自 src/components/HelloWorld.vue 的代码
@MatheusValenza 不怕
试试<v-icon>mdi-home</v-icon> 而不是<v-icon>home</v-icon> 文档：vuetifyjs.com/en/components/icons

标签： vue.js vuetify.js

【解决方案1】：

按照此处的说明安装和使用 Material 图标：https://vuetifyjs.com/en/customization/icons#install-material-icons

或者，您可以使用默认的 Material Design 图标（是的，它们都是不同的）并将您的代码更改为：

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

使用默认 Material Design 图标集中的图标。

【讨论】：