vuetify 图标未显示

Question

我正在使用

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>

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

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'

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'

Answer 3

为我工作：

npm install @mdi/font

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

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

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

Answer 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'
    }
]

Answer 5

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

npm install import @mdi/font

然后在您的

nuxt.config.js

中将以下条目添加到您的

css

字段中：

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

Answer 6

npm install @mdi/font

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

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

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

Answer 7

另请检查您的 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);

Answer 8

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

<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

参考

Answer 9

$ yarn add @mdi/font -D

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

// src/plugins/vuetify.js



import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  },
})

Answer 10

这对我来说是有效的

安装

yarn add @mdi/font -D

// 或者

npm install @mdi/font -D

然后将它们添加到 main.js 或 vuetify.js

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import { createVuetify } from 'vuetify'

export default createVuetify({
  icons: {
    defaultSet: 'mdi', // This is already the default value - only for display purposes
  },
})

Answer 11

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

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

Answer 12

@Hasnat Safder 的

解决方案对我有用，但 main.js 中的顺序很重要：

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

Answer 13

对于 Vuetify 3 用户：

安装：

npm install @fortawesome/fontawesome-free -D

npm install @mdi/font

main.ts：

enter code here


import "vuetify/styles";
import { createVuetify, type ThemeDefinition } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

import { fa } from "vuetify/iconsets/fa";
import { aliases, mdi } from "vuetify/lib/iconsets/mdi";
// make sure to also import the coresponding css
import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using css-loader
import "@fortawesome/fontawesome-free/css/all.css"; // Ensure your project is capable of handling css files

const vuetify = createVuetify({
  theme: {
    defaultTheme: "dark",
  },
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
      fa,
    },
  },
  components,
  directives,
});

app.use(vuetify);

信用：

https://www.the-koi.com/projects/setting-up-vue-3-with-vuetify-icons-and-themes/

Answer 14

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

yarn add material-design-icons-iconfont 并导入 vuetify.js 文件（如果不存在则导入 main.js），如下所示：

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

Answer 15

这对我有用:)只需安装这个包

npm install --save Material-design-icons-iconfont并将其导入到 main.js 或 vuetify.js 文件中

导入'material-design-icons-iconfont/dist/material-design-icons.css'

Answer 16

陷入困境后，按照 vutify 指南解决了问题：

https://vuetifyjs.com/en/features/icon-fonts/

import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    }
  },
})

和

$ yarn add @mdi/font -D
// OR
$ npm install @mdi/font -D