A relevant icons can make UI element much more intuitive, as it helps us understand what we are looking at. That’s because our brain can process a simple picture much faster and more efficiently than a sentence or even a single word. Nevertheless, it is important to pick icons wisely in order not to confuse the user. Luckily, there are large catalogues of icons available online. And better yet, two of the best icon catalogues are available within Shiny by default.
Icon Resources
Two great sets of icons are available within Shiny, which makes them super easy to use. These are fontawesome and glyphicons (available in Bootstrap). I have been using fontawesome more frequently, as they offer an extensive list of free icons and therefore, there is a higher chance of finding a good match for my. That said, I think it’s only fair if you adhere to their usage conditions or pay for a license when using them.
Basic usage
Icons can be produced using the icon function. By default, the function searches in the fontawesome catalogue. If you want to use glyphicons instead, you need to set the lib argument.
'This is a \'poo\' icon from fontawesome: ', icon('poo'),
br(),
'- This is a \'heart\' icon from glyphicons', icon('heart', lib = 'glyphicon')
Be aware, in case the icon is produced on the server-side, it needs to be converted to character and displayed using htmlOutput in order to render properly.
# UI
htmlOutput('home_icon')
# Server
output$home_icon <- renderText({
as.character(icon('home'))
})
Icons in buttons (actionButton)
Adding an icon to an actionButton is straight forward. Let’s first have a look at the function signature of the actionButton function and the related actionLink function. They take icon as an argument.
actionButton(inputId, label, icon = NULL, width = NULL, ...) actionLink(inputId, label, icon = NULL, ...)
Therefore, to add an icon to a button, all we need is to pass the icon as input to the function. Below are the different options for buttons with and without icon. Note that the label argument is required. Therefore, we have to set it to NULL in case we want to omit the label.
actionButton("text_button", label = "Delete")
actionButton("icon_button", label = NULL, icon = icon("trash"))
actionButton("icon_button_glyph", label = NULL, icon = icon("trash", lib = "glyphicon"))
actionButton("text_icon_button", label = "Delete", icon = icon("trash"))
Icons in tabs (tabPanel)
Next, we will look at tabs (we use a shinydashboard application here). Similar to buttons, tabPanel takes icon as input element. Below is a minimal example for illustration. It is really easy and looks great.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = 'Tab Icons'),
dashboardSidebar(disable = TRUE),
dashboardBody(
tabsetPanel(tabPanel("Dashboard", icon = icon('tachometer-alt')),
tabPanel("Alarms",icon = icon('bell')),
tabPanel("Settings", icon = icon('cog')))
)
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
Icons in menuitems (shinydashboard)
menuitem is a navigation element which is displayed in the sidebar of a shinydashboard application. Similar to tabPanel before, you have the option to display an icon along with the menu item text. Here is the same application with menuItem instead of tabPanel.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = 'Menu Item Icons'),
dashboardSidebar(
sidebarMenu(
menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
menuItem("Alarms", icon = icon("bell")),
menuItem("Settings", icon = icon('cog'))
)),
dashboardBody()
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
This post first appeared on rshiny.blog.