How to put an icon to the title of an input widget in Shiny and Shiny dashboard

Question

Is it possible to add an icon to the title of an input widget in Shiny and Shiny and Shiny dashboard? Below is an example. I want to add an icon to each input widget to indicate if it is a numeric input (using a bar-chart icon) or a text input (using a font icon). For now, I am using two columns. One with width = 1 for the icon, and the other is for the input widget. It would be great if I can add the icon to the title directly. Please let me know if there are ways to achieve this.

library(shiny)
library(shinydashboard)

header <- dashboardHeader(
  title = "Icon Example"
)

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem(
      text = "Input",
      tabName = "Input"
    )
  )
)

body <- dashboardBody(
  tabItem(
    tabName = "Input",
    fluidRow(
      column(
        width = 6,
        box(
          status = "primary", solidHeader = TRUE,
          width = 12,
          title = "Box 1",
          fluidRow(
            column(width = 1,
                   tags$div(HTML('<i class="fa fa-bar-chart" style = "color:#0072B2;"></i>'))
            ),
            column(width = 11,
                   numericInput(inputId = "Num", label = "This is a numeric input", value = 1000))
          ),
          fluidRow(
            column(width = 1,
                   tags$div(HTML('<i class="fa fa-font" style = "color:#D55E00;"></i>'))
            ),
            column(width = 11,
                   textInput(inputId = "Text", label = "This is a text input")
            )
          )
        )
      )
    )
  )
)

# User Interface
ui <- dashboardPage(
  header = header,
  sidebar = sidebar,
  body = body
)

# Server logic
server <- function(input, output, session){}

# Complete app with UI and server components
shinyApp(ui, server)

Here is a screenshot of my code example. I would like to have the beginning of the input field aligned with the icon (as indicated by the red arrows). In other words, I hope the icon can be part of the title of the input widget.

Answer 1

Edit:

To increase the readability of the code we can use icon instead of HTML:

numericInput(inputId = "Num", label = div(icon("bar-chart", style = "color:blue;"), " This is a numeric input"), value = 1000)

---

Initial answer:

Just use your div as the label:

library(shiny)
library(shinydashboard)

header <- dashboardHeader(title = "Icon Example")

sidebar <- dashboardSidebar(sidebarMenu(menuItem(text = "Input", tabName = "Input")))

body <- dashboardBody(tabItem(tabName = "Input",
                              fluidRow(column(
                                width = 6,
                                box(
                                  status = "primary",
                                  solidHeader = TRUE,
                                  width = 12,
                                  title = "Box 1",
                                  fluidRow(column(
                                    width = 11,
                                    numericInput(
                                      inputId = "Num",
                                      label = tags$div(HTML('<i class="fa fa-bar-chart" style = "color:#0072B2;"></i> This is a numeric input')),
                                      value = 1000
                                      )
                                  )),
                                  fluidRow(column(
                                    width = 11,
                                    textInput(
                                      inputId = "Text",
                                      label = tags$div(HTML('<i class="fa fa-font" style = "color:#D55E00;"></i> This is a text input'))
                                      )
                                  ))
                                )
                              ))))

# User Interface
ui <- dashboardPage(header = header,
                    sidebar = sidebar,
                    body = body)

# Server logic
server <- function(input, output, session) {}

# Complete app with UI and server components
shinyApp(ui, server)

---

Result:

Answer 2

You can achieve this by wrapping icon() to span() and tagList(). Check the updated code below:

library(shiny)
library(shinydashboard)

header <- dashboardHeader(
  title = "Icon Example"
)

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem(
      text = "Input",
      tabName = "Input"
    )
  )
)

body <- dashboardBody(
  tabItem(
    tabName = "Input",
    fluidRow(
      column(
        width = 6,
        box(
          status = "primary", solidHeader = TRUE,
          width = 12,
          title = span(tagList(icon("bar-chart"), "Box 1")),
          fluidRow(
            column(width = 1,
                   tags$div(HTML('<i class="fa fa-bar-chart" style = "color:#0072B2;"></i>'))
            ),
            column(width = 11,
                   numericInput(inputId = "Num", label = "This is a numeric input", value = 1000))
          )
        ),

        box(
          status = "primary", solidHeader = TRUE,
          width = 12,
          title = span(tagList(icon("font"), "Box 2")),
          fluidRow(
            column(width = 1,
                   tags$div(HTML('<i class="fa fa-font" style = "color:#D55E00;"></i>'))
            ),
            column(width = 11,
                   textInput(inputId = "Text", label = "This is a text input")
            )
          )
        )
      )
    )
  )
)

# User Interface
ui <- dashboardPage(
  header = header,
  sidebar = sidebar,
  body = body
)

# Server logic
server <- function(input, output, session){}

# Complete app with UI and server components
shinyApp(ui, server)