How can I colorize <b-icon> component in nuxt

Question

I use bootstrap-vue in my nuxt project and bootstrap-vue-icons for icons. Everything works nicely, but I can't colorize my icons.

Plugin import:

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

Icon component:

<b-icon variant="danger" icon="check-circle"></b-icon>

package.json:

"bootstrap-vue": {
      "version": "2.23.1",
      "requires": {
        "@nuxt/opencollective": "^0.3.2",
        "bootstrap": "^4.6.1",
        "popper.js": "^1.16.1",
        "portal-vue": "^2.1.7",
        "vue-functional-data-merge": "^3.1.0"
      }
    },

I have tried as variant prop either dynamically binding color styles, it has not worked.

Answer 1

There are multiple ways of doing this: Notic variant="danger" gives the red color by default. Watch this you can add id and style it with css like:

<b-icon `variant="danger"` id="danger_icon" icon="check-circle"  ></b-icon>

#danger_icon{
  color:blue;
}

or change the default variant="danger" which is a class .text-danger color using css again

`<b-icon variant="danger" icon="check-circle"  ></b-icon>`

.text-danger {
color: black !important;

}

Watch this demo: jsfiddle