Vuetify 图标根本不呈现答案

【问题标题】：Vuetify icons don't render at allVuetify 图标根本不呈现
【发布时间】：2020-01-18 13:38:06
【问题描述】：

根据that answer，下面的代码应该用Vuetify渲染一个图标：

<v-icon>
  arrow_downward
</v-icon>

它没有，相反，我在蓝色矩形中间看到纯文本“alarm_on”。控制台没有错误，使用Vuetify 2.0.0 和Vue 2.6.10。下面是我如何将 Vuetify 添加到我的项目中：

// Vue 从'vue'导入Vue；

// Vuetify
import '@mdi/font/css/materialdesignicons.css';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi'
  },
});

知道为什么图标不起作用吗？

【问题讨论】：

你的 vuetify 配置是什么样的？尤其是 iconfont 选项 (vuetifyjs.com/en/customization/icons)
你是在 app.js 中导入这个模块import '@mdi/font/css/materialdesignicons.css' 吗？
你有这个吗？导入 'vuetify/src/stylus/app.styl' Vue.use(Vuetify, { iconfont: 'md' })
我在问题中添加了我的配置。是的，我确实导入了materialdesignicons.css。 @JeffProd：默认图标安装中不需要import 'vuetify/src/stylus/app.styl' Vue.use(Vuetify, { iconfont: 'md' })。

标签： vue.js vuetify.js

【解决方案1】：

像这样使用 mdi 前缀

<v-icon>
  mdi-arrow-down
</v-icon>

这些是 mdi 的有效图标 https://materialdesignicons.com/

【讨论】：