title: Bootstrap icons does not appear in the front-end when used in Vuejs Template
body: <p>I am trying to build the Web application using the <code>Vue.JS</code> and within my application, I am trying to use the <code>[Bootstrap Icons][1]</code>. But for some reason even after adding the icons, they do not appear on the screen.</p>
  <p>I did the following steps:</p>
  <ol>
  <li>Install <code>Bootstrap Icons</code> into the application:</li>
  </ol>
  <pre><code>npm install bootstrap-icons
  </code></pre>
  <p>After installing I am able to see it in my <code>package.json</code> file.</p>
  <ol start="2">
  <li>Add it to <code>Main.js</code> file:</li>
  </ol>
  <pre><code>import 'bootstrap-icons/font/bootstrap-icons';
  </code></pre>
  <ol start="3">
  <li>Within the component add it to the required button:</li>
  </ol>
  <pre><code>&lt;template&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary copy&quot; @click=&quot;copyXML()&quot;&gt;Copy&lt;i class=&quot;bi bi-clipboard&quot;&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/template&gt;
  </code></pre>
  <p>This is not making any difference to my button text. I am still able to see only <code>Copy</code> text on the button.</p>
  <p>As per the documentation, there is another way to add icons. When I add the <code>SVG</code> then I get the icons:</p>
  <pre><code> &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary copy&quot; @click=&quot;copyXML()&quot;&gt;Copy&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-archive&quot; viewBox=&quot;0 0 16 16&quot;&gt;
    &lt;path d=&quot;M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z&quot;/&gt;
  &lt;/svg&gt;&lt;/button&gt;
  </code></pre>
  <p>I am not understanding why only <code>SVG</code> works, isn't it possible to add only <code>&lt;i class=&quot;bi bi-clipboard&quot;&gt;&lt;/i&gt;</code> and get the icons?</p>
  <p>This may be a silly question but I am looking for some explanation and usage of icons in the Vuejs application.</p>