How to conditionally color code in a shinymaterial app



I came across the shinymaterial package, which creates apps that look nice and it seems very simple to implement. I am transitioning an app from shinydashboard to shinymaterial.

However, shinydashboard does not include a built-in option to create an infoBox like there is within shinydashboard.

With some searching, I found this post on GitHub, which worked easily to create similar value boxes!

I was able to copy this code to also add the desired color. However, where I am running into a problem, is how to conditionally change the color of the icon based on a value.

What I am currently doing that seems like it should work is this.

Here's the code that works to assign a specific (non-dynamic) color to the icon within the ui:

material_column(width=4, material_card(
    material_row(icon("ambulance","fa-2x"), tags$style(".fa- 
    ambulance{color:#ff0000}"), "LTI Rate", hr()), h3(textOutput("LTIRate")), 

Now to determine the color that should be displayed, I have created this code on the server side:

output$OSHAColor <- renderText({

   LTI_Rate <- inj_dmg_stn %>%
   filter(Location == input$STATION) %>%
   select(`LTI Rate`)

   LTI_Target <- inj_dmg_stn %>%
   filter(Location == input$STATION) %>%
   select(`LTI Target`)

   ifelse(LTI_Rate <= LTI_Target, sprintf('".fa-medkit 
   sprintf('".fa-medkit {color:%s}"','#FF00000'))


To test what this is really outputting, I have displayed it three ways in the ui, using the following code:

    HTML(paste(textOutput("OSHAColor"))), textOutput("OSHAColor"))

The first outputs as the HTML string (starting with ...<div id="OSHAColor" class="...), which is not what I want. The second and third output as desired for the shiny tag string I am trying to pass to shiny$tags (".fa-medkit {color: #228B22}").

When I try use use either of those two options in tags$style for my icon like this:


I get a black icon, instead of red or green, meaning the color or tags$style parameter was not recognized.

I thought this post might help me, but I tried and I'm not sure I can create the whole icon on the server side.

Lastly, here is a reproducible example:


    ## shinymaterial infobox reference site

    data <-
    colnames(data) <- c('Rate')

    ui <- material_page(

      title = "Reproducible Example",

        title = tags$b("INJURIES"),
        tags$styleHTML(paste(textOutput("Color")))), "Rate", hr()), 
        h3(textOutput("ARate")), depth=5)),
      material_card(material_row(icon("ambulance","fa-2x"), tags$style(".fa- 
        ambulance {color:#ff0000}"), "Rate", hr()), h3(textOutput("Rate")), 


    server <- function(input, output) {

      ## Rate ##
      output$Rate <- renderText({as.character(sprintf("%.2f",round(



      ## Color ##
      output$Color <- renderText({

        ifelse(data[1,1] <= 4.0, as.character(sprintf('".fa-medkit         
        {color:%s}"','#228B22')), as.character(sprintf('".fa-medkit 



    shinyApp(ui = ui, server = server)

Any suggestions would be greatly appreciated.