title: mdi-vue icons display twice
body: <p>I am using the <a href="https://www.npmjs.com/package/mdi-vue" rel="nofollow noreferrer">Material Design Icons for Vue.js</a> library and when I try to display an icon it is shown twice and can only be fixed by removing the <code>::before</code> which contains the smaller duplicate.</p>
  
  <p>(I would usually put this code in a JSFiddle but the mdi-vue library cannot be used in there)</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;PowerIcon /&gt;
  
    &lt;div class='fixed'&gt;
      &lt;PowerIcon /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>import PowerIcon from 'mdi-vue/Power'
  
  new Vue({
    el: "#app",
    components: {
      PowerIcon
    }
  })
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.fixed .mdi-power::before {
    display: none;
  }
  </code></pre>
  
  <p>Results in:</p>
  
  <p><a href="https://i.stack.imgur.com/aO860.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aO860.png" alt="mdi-vue-bug"></a> </p>
  
  <p>Am I using the library incorrectly or is this just a bug?</p>