mdi-vue 图标显示两次

Question

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

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

HTML

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

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

JS

import PowerIcon from 'mdi-vue/Power'

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

CSS

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

结果：

我是否错误地使用了这个库，或者这只是一个错误？

Answer 1

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

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

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

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

mdi-vue icons display twice