vue.js - 如何让 vuetify 显示 'mdiSvg' 图标？

Question

遵循此处的文档:
https://next.vuetifyjs.com/en/customization/icons
我完全按照描述设置我的项目。
预期的:
看到一个 <svg>标签。
实际的:
我看到一个 <i>标签(这会导致 IE 上的某些设置出现问题)
这是复制品的链接:
https://codesandbox.io/embed/dialog-vuetify-bhs76

Answer 1

这就是我一直在做的方式。如果需要，您还可以为图标设置自定义名称 - 如果您决定更改使用的图标，这将非常有用:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import {
  mdiDelete
} from '@mdi/js';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
    values: {
      mdiDelete,
      // or give it a custom name:
      delete: mdiDelete,
    }
  },
});

然后在您的 v-icon 组件中:

<v-icon>$mdiDelete</v-icon>
<v-icon>$delete</v-icon>