vuetify 图标不显示

Question

我正在使用 vue.js 和 vuetify 。我想添加一个图标，但它没有按预期工作（未呈现）。

我怎样才能解决这个问题？

请参考以下代码：

main.js

 import Vue from 'vue'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

索引.html

 <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

日历.vue

 <i class="material-icons">
keyboard_arrow_down
</i>

我希望它看起来像一个图标，而不是代码。

原文由 eunhee ju 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Vue CLI 3，我们在 src 文件夹中没有 index.html ，因此您也可以

npm install --save material-design-icons-iconfont

并将其导入 main.js 文件

import 'material-design-icons-iconfont/dist/material-design-icons.css'

原文由 Hasnat Safder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

通过 vuetify-loader 1.2.2 安装的 Vuetify 2.1.3 存在此问题

似乎以前的解决方案不起作用，因为默认图标库已更改为 mdi-font。

解决方案是：

 yarn add @mdi/font

在文件 main.js （或 plugins/vueitfy.js 如果存在）中，在导入下方添加此行

import '@mdi/font/css/materialdesignicons.css'

原文由 BenB 发布，翻译遵循 CC BY-SA 4.0 许可协议