如何让 vuetify 显示“mdiSvg”图标？

Question

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

Answer 1

您应该从vuetify 站点安装正确的图标库
，然后将其导入 vuetify 插件文件夹

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
  },
})

至少也是最后你应该使用组件上的图标

    <template>
      <div>
          <v-icon>{{mdiMenu}}</v-icon>
      </div>
    </template>

    <script>
    import { mdiMenu } from '@mdi/js'; 
    export default {
      data() {
        return {
            mdiMenu
        };
      }
    };
    </script>

您可以在此材料设计网站上找到图标