Bootstrap icons does not appear in the front-end when used in Vuejs Template

Question

I am trying to build the Web application using the Vue.JS and within my application, I am trying to use the [Bootstrap Icons][1]. But for some reason even after adding the icons, they do not appear on the screen.

I did the following steps:

1. Install Bootstrap Icons into the application:

npm install bootstrap-icons

After installing I am able to see it in my package.json file.

2. Add it to Main.js file:

import 'bootstrap-icons/font/bootstrap-icons';

3. Within the component add it to the required button:

<template>
  <button type="button" class="btn btn-secondary copy" @click="copyXML()">Copy<i class="bi bi-clipboard"></i></button>
</template>

This is not making any difference to my button text. I am still able to see only Copy text on the button.

As per the documentation, there is another way to add icons. When I add the SVG then I get the icons:

 <button type="button" class="btn btn-secondary copy" @click="copyXML()">Copy<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-archive" viewBox="0 0 16 16">
  <path d="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"/>
</svg></button>

I am not understanding why only SVG works, isn't it possible to add only <i class="bi bi-clipboard"></i> and get the icons?

This may be a silly question but I am looking for some explanation and usage of icons in the Vuejs application.

Answer 1

Adding this line to the main.js seems to work for me:

import 'bootstrap-icons/font/bootstrap-icons.css'

The important part seems to be the .css at the end. Without it, it imports the .js file with the same name.

Now the i tags are working:

<i class="bi bi-clipboard"></i>