How do I recolour a bsicon in a bslib value box?

[jack-davison]

Good evening,

I'm trying to recolour a bsicon in a bslib value box and I cannot seem to get my head around it. Any of my attempts seem to get overridden by a CSS property in bootstrap.min.css.

library(bslib)

ui <- page_fixed(
  theme = bs_theme(primary = "red"),
  value_box("title", 100, showcase = bsicons::bs_icon("info", fill = "red"))
)

server <- function(input, output) {}

shiny::shinyApp(ui, server)

Cheers!

[gadenbuie]

Hi @jack-davison, you're right this is kind of tricky with the Shiny preset because of the CSS we use to give the icon the gradient. The best thing you can do is to use bs_icon("info", fill = "red !important") which will ensure your fill property is applied.

The other way to affect the icon color is to use the theme argument of value_box(), e.g. value_box(theme = "text-red").