Vuetify 图标显示不正确：它们显示为“$vuetify.icons...”

Question

我遇到 Vuetify 中的图标无法正确显示的问题，例如下面是 Vuetify expansion panel. I already tried the solutions in this question ，但它们对我不起作用。您可以在下方看到人字形向下图标显示为 $vuetify.icons.expand。我已经尝试过导入 @mdi/font 这对我没有任何作用......这是我正在使用的代码：

import Vue from 'vue'
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
// import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify, {
    icons: {
        iconfont: 'mdi'
    }
});

//expansion panels

导入material-design-icons-iconfont/dist/material-design-icons.css，将图标更改为一些奇怪的图标。

请告诉我可能是什么问题以及我还能尝试什么！

Answer 1

假设您使用的是 Vuetify 2...

我认为您缺少的关键是将 Vuetify 传递给 Vue 构造函数，如下所述：

https://vuetifyjs.com/en/getting-started/quick-start#bootstrapping-the-vuetify-object

像这样：

new Vue({
  vuetify: new Vuetify(),
  // ... all the other stuff you're currently passing

如果要配置字体，则需要将其传递给 Vuetify 构造函数，而不是 Vue.use。例如

const vuetify = new Vuetify({
  icons: {
    iconfont: 'mdi'
  }
})

new Vue({
  vuetify,
  // ... all the other stuff you're currently passing

mdi 无论如何都是默认图标集，因此如果您想使用该字体，则无需执行此操作。

您导入 CSS 的方式似乎是正确的。如果您没有做对，您应该会看到错误。

当前文档在此处：https://vuetifyjs.com/en/customization/icons。在撰写本文时，它适用于 2.1.0 版。请注意不要将 Vuetify 2 所需的配置与 1.5 混淆，尽管有一些相似之处，但它们有很大的不同。您还需要清楚，有两种名称非常相似的字体，一种使用 iconfont: 'mdi' 配置，一种使用 iconfont: 'md' 配置。两者都根据上下文在名称中使用单词 'Material'、'Design' 和 'Icons'。

OP 编辑

我不能把它放在评论中，所以我想我会编辑答案。这就是最终对我有用的东西：

// src/plugins/vuetify.ts

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css';
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify);

const vuetify = new Vuetify({
    icons: {
        iconfont: 'mdi'
    }
});

export default vuetify

然后在我使用 Vue 的其他文件中：

// other_file.ts

import vuetify from './plugins/vuetify';

new Vue({
    vuetify,
    // ...other stuff...
})

Vuetify 图标显示不正确：它们显示为“$vuetify.icons...”

Vuetify icons not showing correctly: they appear as as "$vuetify.icons..."

vuejs2

vuetify.js

material-design-icons