vuetify 图标不显示答案

【问题标题】：vuetify icon not showingvuetify 图标不显示
【发布时间】：2019-11-24 23:33:41
【问题描述】：

我正在使用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">

日历.vue

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

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

【问题讨论】：

您接受了错误的答案。您是否能够更改您的选择以更好地帮助他人找到正确的结果？ stackoverflow.com/a/57535771/5735265 应该是接受的结果。
我改变了我的选择，谢谢大家回答我的问题！ :)

标签： vue.js icons vuetify.js

【解决方案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'

【讨论】：

我认为这个答案实际上是问题的答案，因为 vuetify 自然地提供了 v-icon。自 vue-cli 3 以来的变化使这个答案更加相关。谢谢@Hasnat
这是正确答案！我刚刚做了一个新的 Vue-cli 项目，遵循 Vuetify 快速入门并复制了他们的一个模板，但图标没有出现——这就是解决方案。真的花了我一段时间。
这与 Vue CLI 3 和 Vuetify 完美配合。谢谢！
成功了。 Vuetify 文档应该指出这一点。我花了很多时间
我使用 yarn add material-design-icons-iconfont 并在工作后导入效果非常棒

【解决方案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'

【讨论】：

官方文档中也说明了这一点 - 但是问题仍然存在。我让这些图标工作的唯一方法是使用@hasnat Safder 提供的解决方案。
@Orochi 他们肯定是发生了一些奇怪的事情，我希望他们能解决它
这是对我有用的解决方案，而不是来自 Hasnat Safder。除了，我在 main.js 中导入因为我找不到 vuetify.js
对我来说，图标在开发（npm run serve）模式下显示，但不在生产（npm run build）模式下显示。使用“npm install --save @mdi/font”安装字体并导入 vuetify.js 节省了我的时间。

【解决方案3】：

为我工作：

npm install @mdi/font

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

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

使用“vuetify”：“^2.3.19”，“vue”：“^2.6.12”，

【讨论】：

【解决方案4】：

如果您使用 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'
    }
]

【讨论】：

【解决方案5】：

如果您将 Nuxt 与 Vuetify 一起使用，并且 Material 图标不会显示在 Firefox 中：

npm install import @mdi/font

然后在您的nuxt.config.js 中将以下条目添加到您的css 字段中：

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

【讨论】：

【解决方案6】：

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

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

Reference

【讨论】：

【解决方案7】：

您可以导入所有必要的样式

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';

【讨论】：

【解决方案8】：

@Hasnat Safder 的 solution 对我有用，但 main.js 中的顺序很重要：

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

【讨论】：

【解决方案9】：

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

yarn add material-design-icons-iconfont

并像这样导入 vuetify.js 文件（或 main.js，如果它不存在）：

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

【讨论】：

【解决方案10】：

$ yarn add @mdi/font -D

// 或 $ npm install @mdi/font -D

// src/plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css' // 确保您使用的是 css-loader 从 'vue' 导入 Vue 从 'vuetify/lib' 导入 Vuetify

Vue.use(Vuetify)

导出默认的新 Vuetify({ 图标：{ iconfont: 'mdi', // 默认 - 仅用于显示目的 }, })

【讨论】：

【解决方案11】：

同时检查你的 vuetify config 文件plugins/vuetify.js

额外的桅杆设置iconfont: 'mdi'。在相同的情况下默认为iconfont:'fas'

我花了好几个小时才找到它）

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

const opts = {
  theme: {
    themes: {
      light: {
        //
      },
    },
  },
  icons: {
    iconfont: 'mdi',
  },
};

export default new Vuetify(opts);

【讨论】：

【解决方案12】：

npm install @mdi/font

写入 main.js（或 plugins/vuetify.js）

import "@mdi/font/css/materialdesignicons.css";

我也从这里得到了这个答案，它成功地工作了）））

【讨论】：

重复。答案已经存在。