title: Ionic 4, Ionicon library adding a custom icon
body: <p>I'm currently using Vue Cli to generate a project which includes ionic and ionicon libraries.</p>
  
  <p>package.json</p>
  
  <pre><code>  "@ionic/core": "^4.11.7",
    "@ionic/pwa-elements": "^1.4.1",
    "@ionic/vue": "0.0.9",
    "ionicons": "^4.6.3",
  </code></pre>
  
  <p>I'm trying to add a custom icon to my project.
  I'm following the Ionic documentation <a href="https://ionicons.com/usage" rel="nofollow noreferrer">https://ionicons.com/usage</a> which state that in order to add a custom SVG icon the following steps must be taken:</p>
  
  <blockquote>
    <p>To use a custom SVG, provide its URL in the src attribute to request
    the external SVG file. The src attribute works the same as  in that the URL must be accessible from the webpage that's
    making a request for the image. Additionally, the external file can
    only be a valid SVG and does not allow scripts or events within the
    SVG element.</p>
  </blockquote>
  
  <p></p>
  
  <p>I've followed the example and the icon is not being loaded. Another example for the same case scenario that I've found is the following <a href="https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html" rel="nofollow noreferrer">https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html</a>. Following this example I've tried adding the SVG code for the icon directly in the src. This seems to work but for organization purposes, I would find it more convenient if I could pass the file path to the component. </p>