Vue.js 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">

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

calendar.vue

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

键盘箭头向下

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

---

如果您使用的是Vuetify，则只需使用支持材质和字体图标的

组件即可：

例如：

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

向下箭头

通过使用Vuetify，基本上不再需要使用

class=“icon\u name”

语法

编辑：图标引用-&

---

编辑2：差不多一年了，我回来看到人们只是投了反对票，在评论中滥发“这不是答案”，这让我很困扰。这是真的，这不是答案，但它得到了批准，所以我对此无能为力。查看下面Hasnat Safder的答案以了解解决方案。

对于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'

---

如果使用Nuxt.js，您可能会面临完全相同的问题。要解决这个问题，您必须在CSS中声明材质设计图标。。。例如，通过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'
    }
]

---

是否通过Vuetify loader 1.2.2安装了Vuetify 2.1.3的此问题

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

解决办法是：

yarn add @mdi/font

并在文件

main.js

（或

plugins/vueitfy.js

（如果存在）的导入下方添加这一行

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

---

阅读最新发布的文档，并在index.html中包含以下代码

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

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

---

如果您将Nuxt与Vuetify和材质图标一起使用，则不会在Firefox中显示：

npm install import @mdi/font

然后在

numxt.config.js

中，将以下条目添加到

css

字段中：

css: ["@mdi/font/css/materialdesignicons.css"]

---

可以导入所有必要的样式

app.scss

@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900";
@import "https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css";
@import "https://fonts.googleapis.com/css?family=Material+Icons";
@import '~vuetify/dist/vuetify.css';

@Hasnat Safder中的命令对我来说很有用，但main.js中的命令很重要：

import 'material-design-icons-iconfont/dist/material-design-icons.css';
import vuetify from './plugins/vuetify';

纱线方式（类似于Hasnat的反应）：

并导入到vuetify.js文件（如果不存在main.js，则导入main.js），如下所示：

为我工作：

npm install @mdi/font

然后将其放入plugins/vuetify.js中：

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

---

使用“vuetify”：“^2.3.19”，“vue”：“^2.6.12”，我认为这个答案实际上就是问题的答案，因为vuetify自然提供了v形图标。自vue cli 3以来的更改使此答案更具相关性。谢谢@hasnat这是正确的答案！在Vuetify快速入门之后，我刚刚做了一个新的Vue cli项目，并复制了其中一个模板和图标，但没有显示出来——这就是解决方案。真的花了我一段时间。这在Vue CLI 3和Vuetify中非常有效。谢谢成功了。Vuetify文档应该指出这一点。我花了很多时间使用纱线添加材料设计图标图标图标，并在作品完成后导入。这在官方文档中也有说明，但问题仍然存在。我让这些图标正常工作的唯一方法是使用@hasnat Safder提供的解决方案。@Orochi他们显然有些奇怪，我希望他们能解决它。这是对我有效的解决方案，而不是来自hasnat Safder。除此之外，我在main.js中导入了，因为我找不到vuetify.jsf，因为我的图标显示在开发（npm运行服务）模式中，而不是在生产（npm运行构建）模式中。使用“npm安装”安装字体--保存@mdi/font“导入vuetify.js节省了我的时间。这不是问题的答案这是配置问题不是语法问题，请参阅下面Hasnat safder的答案。这不是问题的答案。请参阅下面@Hasnat Safder的帖子以获得正确答案。您接受了错误的答案。您是否能够更改您的选择以更好地帮助他人找到正确的结果？应该是可以接受的结果。