How to change the color of a box's collapse/expand button in R Shiny?

Question

I cannot figure out how to change the color of the +/- button of the collapsible box. I want to change the white button to black. Below is the sample code:

library(shiny)
library(shinydashboard)

body <- dashboardBody(
  fluidRow(
    box(status = "info", solidHeader = TRUE, title = "Background - Hypothetical Life", width = "auto", collapsible = TRUE, collapsed = TRUE,
            h5("sample text"))))

ui <- dashboardPage(
  dashboardHeader(title = "Box"),
  dashboardSidebar(),
  body
)

server = function(input, output, session) { }
shinyApp(ui = ui, server = server)

Many thanks!

Answer 1

Here's how you can do it, with CSS:

library(shiny)
library(shinydashboard)

body <- dashboardBody(
  tags$style(
    type = 'text/css',
    '.fa, .fas {
      font-weight: 900;
      color: black;
    }'
  ),
  fluidRow(
    box(status = "info", solidHeader = TRUE, 
        title = "Background - Hypothetical Life", 
        width = "auto", collapsible = TRUE, collapsed = TRUE,
        h5("sample text"))))

ui <- dashboardPage(
  dashboardHeader(title = "Box"),
  dashboardSidebar(),
  body
)

server = function(input, output, session) { }
shinyApp(ui = ui, server = server)

As said in this answer, when you want to change something in the CSS style but don't really know CSS (like me), launch your app in browser, do "Inspect element" (right click or Ctrl+Shift+C for me) and check the "Inspector". It will show you the CSS description of each element.

Then, you put this CSS code in tags$style like in the example above and you add some arguments to customize it. There are many resources online on CSS.

For example, in the example above, I saw in the "Inspector" that the icon CSS style was:

.fa, .fas {
   font-weight: 900;
}

So I just put it in a tags$style and then searched what was the argument I needed to modify the color of the icon. This answer to another post gave me solution: you need to add color.

Hope this helps