Can icons in valueBoxes be centered?

Question

I have a need of having the icon in valueBoxes centered. Can that be done?

Here is a snippet with my aproach

library(shiny)
library(shinydashboard)

header <- dashboardHeader()
sidebar <- dashboardSidebar(disable = TRUE)
body <- dashboardBody(
  tags$head(tags$style(HTML('.small-box .icon-large {top: 5px;}'))),
  valueBox(
    value = "Test",
    subtitle = NULL,  
    icon = tags$div(class = "fas fa-thumbs-down", style="text-align:center")
  )
)

shinyApp(
  ui = dashboardPage(header, sidebar, body), 
  server = function(input, output){}
)

Answer 1

Here's one way using a CSS trick.

library(shiny)
library(shinydashboard)

header <- dashboardHeader()
sidebar <- dashboardSidebar(disable = TRUE)
body <- dashboardBody(
  tags$head(tags$style(HTML('.small-box .icon-large {top: 5px;}'))),
  valueBox(
    value = "Test",
    subtitle = NULL,  
    icon = icon("fas fa-thumbs-down", 
               style = "position:relative;right:200px;bottom: 15px")
  )
)

shinyApp(
  ui = dashboardPage(header, sidebar, body), 
  server = function(input, output){}
)

You may further adjust right and bottom property as per your requirement.