Vuetify 应用程序中不显示图标

Question

我已经使用 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>

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

Answer 1

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

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

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

使用默认材料设计图标集中的图标。