vuetify图标未显示
我正在使用vue.js和vuetify。我想添加一个图标，但不起作用。（未呈现）
我怎样才能解决这个问题？
请参考以下代码
main.js
import Vue from 'vue'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
Vue.use(Vuetify);
index.html
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
calendar.vue
<i class="material-icons">
keyboard_arrow_down
</i>
我希望它看起来像一个图标，而不是代码
Ben*_*enB 54
通过 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'
- 这是对我有用的解决方案，而不是来自 Hasnat Safder。除了，我在 main.js 中导入，因为我找不到 vuetify.js (4认同)
- 官方文档中也说明了这一点 - 但问题仍然存在。我让这些图标正常工作的唯一方法是使用 @hasnat Safder 提供的解决方案。 (2认同)
Has*_*der 27
使用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'
- 我认为这个答案实际上是问题的答案，因为vuetify自然提供了v-icon。自vue-cli 3以来的变化使此答案更加相关。谢谢@Hasnat (5认同)
- 有效。Vuetify 文档应该指出这一点。我花了很多时间 (5认同)
- 我使用纱线添加材料设计图标图标图标并在工作后导入效果非常好 (4认同)
- 这是正确的答案！在Vuetify快速入门之后，我只是做了一个新的Vue-cli项目，并复制了其中的一个模板和图标，但没有出现-这就是解决方案。真的花了我一段时间。 (2认同)
小智 7
为我工作：
npm install @mdi/font
然后把它放在 plugins/vuetify.js 中：
import '@mdi/font/css/materialdesignicons.css'
使用 "vuetify": "^2.3.19", "vue": "^2.6.12",
如果您使用 Nuxt.js，您可能会面临完全相同的问题。为了解决这个问题，你必须在你的 CSS 中声明 Material Design 图标...通过 CDN，例如，如下：
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
}
]
小智 6
如果您将 Nuxt 与 Vuetify 一起使用，并且 Material 图标不会显示在 Firefox 中：
npm install import @mdi/font
然后在您nuxt.config.js的字段中添加以下条目css：
css: ["@mdi/font/css/materialdesignicons.css"]