How to change a color of an icon in Valuebox (flexdashboard)

Question

I'm creating a KPIs in Rmd Flexdashboard (not Shiny) and would like to change a color of an icon in Valuebox based on a rule:

• if value is higher than 0 then green arrow up
• if value is lower than 0 red arrow down

I've figured out the rule, but I don't know how to change the color (tags$i doesn't work). Any help much appreciated.

valueBox(rule,  
         "Title + subtitle",
         icon = ifelse(rule >= 0, "fa-angle-up", "fa-angle-down"),
         color = "white")

Answer 1

Late answer, in case you haven't figure this out yet:

You can use css to change the color. Create a .css file. You might have to save it on a folder named www in the same directory. More info here: https://shiny.rstudio.com/articles/css.html. I did this on my example. If you right click on the arrow and choose inspect element, you will find the name of the style you are after. There you can test different colors.

You can see in the image above that the style you are after is called .value-box .icon i. And on the top right of the image you see the type of icon. Then you add this style with your color of choice to your newly created .css like this:

/*arrow down*/
.value-box .icon i.fa.fa-angle-down{
    
    color: rgb(255, 0, 0); /*red*/
  
}
 
/*arrow up*/    
.value-box .icon i.fa.fa-angle-up{
  
    color: rgb(0, 153, 0); /*green*/
  
}

Add to the header the path to your .css file :

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    css: www/styles.css 

---

Here is the result:

#arrow down
library(flexdashboard)
rule = -3
valueBox(rule,  
         "Title + subtitle",
         icon = ifelse(rule >= 0, "fa-angle-up", "fa-angle-down"),
         color = "white")

And arrow up:

library(flexdashboard)
rule = 3
valueBox(rule,  
         "Title + subtitle",
         icon = ifelse(rule >= 0, "fa-angle-up", "fa-angle-down"),
         color = "white")