Vuetify图标未正确显示：显示为“ $ vuetify.icons ...”

Question

我遇到了一个问题，Vuetify中的图标无法正确显示，例如下面的Vuetify expansion panel。我已经在问题vuetify icon not showing中尝试过解决方案，但是它们对我没有用。您可以在下面看到燕尾形向下图标显示为$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'。两者都根据上下文使用名称中的“材料”，“设计”和“图标”。

由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...
})