title: How To Add Custom SVG Icon in Vuetify - Vue
body: <p>I'm using vuetify 1.1.8 and vue 3.0.0-rc.3. I am trying to use some of the custom SVG icons in my project, which I have designed, instead of default icons from Material Icons or FontAwesome Icons which are supported by vuetify </p>
  
  <p>I have tried using <code>vue-svg-loader</code> to load my custom svg icons, and use them as components. Something like this</p>
  
  <pre><code>&lt;template&gt;
      &lt;icon-one&gt;&lt;/icon-one&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import iconOne from './public/iconOne.svg'
      export default{
          components:{
                   iconOne
            }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>But the problem with <code>vue-svg-loader</code> is that I cannot use them in <code>&lt;v-text-field&gt;</code>'s <code>append-icon</code> and many other places where I had freedom with <code>&lt;v-icon&gt;</code>.</p>
  
  <p>I have also read the <a href="https://vuetifyjs.com/en/framework/icons#using-custom-icons" rel="noreferrer">vuetify docs</a> where they have mentioned about using custom icons but I don't think that is helping too.</p>
  
  <p>Can someone help me out with this. May be I should try sprite-images as supported by material angular</p>
  
  <p>TL;DR </p>
  
  <p>I have custom self-made SVG Icons, and I want to use them as <code>&lt;v-icon&gt;customIcon&lt;/v-icon&gt;</code> in vuetify</p>