mdi-vue 图标显示两次答案

【问题标题】：mdi-vue icons display twicemdi-vue 图标显示两次
【发布时间】：2020-08-16 12:54:49
【问题描述】：

我正在使用Material Design Icons for Vue.js 库，当我尝试显示一个图标时，它会显示两次，只能通过删除包含较小副本的::before 来修复。

（我通常会将此代码放在 JSFiddle 中，但不能在其中使用 mdi-vue 库）

HTML

<div id="app">
  <PowerIcon />

  <div class='fixed'>
    <PowerIcon />
  </div>
</div>

import PowerIcon from 'mdi-vue/Power'

new Vue({
  el: "#app",
  components: {
    PowerIcon
  }
})

CSS

.fixed .mdi-power::before {
  display: none;
}

结果：

我是在错误地使用库还是这只是一个错误？

【问题讨论】：

【解决方案1】：

当同时使用两种不同的方法来包含 Material Design 图标库时，可能会出现此错误。

检查您的 index.html 是否链接到处理材料设计图标的 css 文件。类似的东西：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

例如，当您安装 Vuetify over Vue CLI 或测试其他选项以使用 Material Design 图标时，就会发生这种情况。

【讨论】：