Dependencies

install.packages("htmltools") # possibly unnecessary
remotes::install_github("mitchelloharawild/icons")

Data

For the type of table we are creating here, we want a few data points of different types. For example, if we had to display personal and social media information in a tabular format, we could have something like the list below. We have one person, “Jaime” and we record information about their age, hobby, and twitter account:

jaime <-
list(
Name = "Jaime",
Position = "Researcher",
Twitter = "Jaime123",
Hobby = "Football"
)
jaime
## $Name
## [1] "Jaime"
##
## $Position
## [1] "Researcher"
##
## $Twitter
## [1] "Jaime123"
##
## $Hobby
## [1] "Football"

For now, we’ll work only with this one person list, but you can imagine having many such items in a data frame and indexing this data frame to display data.

Icons

For icons, we’ll use the {icons} package. We’ll work with awesome icons, but with the {icons} package, we have several other options too:

library(icons)
## ── Installed icons ─────────────────────────────────────────────── icon 0.2.0 ──
## ✖ ionicons ✖ google_material
## ✖ academicons ✖ feather_icons
## ✖ simple_icons ✖ octicons
## ✖ bioicons ✔ awesome 6.3.0

Downloading icon sets is simple, we use icons::download_*, and the resulting object is an icon_set class that we can pass an icon name to obtain the SVG of the icon:

icons::download_awesome()
icons::awesome("twitter")

HTML table with icons

First, we add icons to our person list. We convert each item to a list with two slots, text and icon.

jaime <-
list(
Name = list(text = "Jaime", icon = "user"),
Position = list(text = "Researcher", icon = "flask"),
Twitter = list(text = "Jaime123", icon = "twitter"),
Hobby = list(text = "Football", icon = "futbol")
)

Next, we’ll use this list of item lists to generate the HTML for our table:

• We define some CSS styles for the th and td tags
• We use lapply to cycle over the elements of our person list jaime to generate rows (tr + td) tags for each item
• We wrap the row_tags in a table tag (tags$table)

style <- "text-align: left; padding: 10px 25px;"
row_tags <- lapply(jaime,
function(x) {
htmltools::tags$tr(
htmltools::tags$td(
style = style,
icons::icon_style(
icons::awesome(name = x[["icon"]]),
scale = 1.5,
fill = "#5E81AC"
)
),
htmltools::tags$td(style = style, x[["text"]])
)
})
container_style <- "
border: 0.5px solid #5E81AC;
width: 50%;
padding: 20px;
display: flex;
justify-content: center;"
table_with_icons <- htmltools::div(style = container_style,
htmltools::tags$table(
htmltools::tags$tr(
htmltools::tags$th("Icon", style = style),
htmltools::tags$th("Text", style = style)
),
row_tags
))
table_with_icons

Application in a parametrized report or a Shiny application

To use our table with icons in a Rmd report or shiny application, we need to wrap it into a function:

make_table_w_icons <- function(person_list) {
style <- "text-align: left; padding: 10px 25px;"
row_tags <- lapply(person_list,
function(x) {
htmltools::tags$tr(
htmltools::tags$td(
style = style,
icons::icon_style(
icons::awesome(name = x[["icon"]]),
scale = 1.5,
fill = "#5E81AC"
)
),
htmltools::tags$td(style = style, x[["text"]])
)
})
container_style <- "
border: 0.5px solid #5E81AC;
width: 50%;
padding: 20px;
display: flex;
justify-content: center;"
table_with_icons <- htmltools::div(style = container_style,
htmltools::tags$table(
htmltools::tags$tr(
htmltools::tags$th("Icon", style = style),
htmltools::tags$th("Text", style = style)
),
row_tags
))
return(table_with_icons)
}
make_table_w_icons(jaime)

We can now create a simple {shiny} application that displays our person data with icons.

tableWithIconsUI <- function(id) {
ns <- shiny::NS(id)
shiny::tagList(
shiny::uiOutput(ns("tab"))
)
}
tableWithIconsServer <- function(id) {
shiny::moduleServer(
id,
function(input, output, session) {
person_rct <- shiny::reactiveVal()
output$tab <- shiny::renderUI({
make_table_w_icons(person_list = person_rct())
})
return(list(
set_person = function(x) {
person_rct(x)
}
))
}
)
}

library(shiny)
jaime <-
list(
Name = list(text = "Jaime", icon = "user"),
Position = list(text = "Researcher", icon = "flask"),
Twitter = list(text = "Jaime123", icon = "twitter"),
Hobby = list(text = "Football", icon = "futbol")
)
jessica <- list(
Name = list(text = "Jessica", icon = "user"),
Position = list(text = "Researcher", icon = "flask"),
Twitter = list(text = "IamJessica", icon = "twitter"),
Hobby = list(text = "Fishing", icon = "fish")
)
persons_data <- list(
Jaime = jaime,
Jessica = jessica
)
ui <- fluidPage(
selectInput(
inputId = "person",
label = "Person",
choices = c("Jaime", "Jessica")
),
tableWithIconsUI(id = "tab1")
)
server <- function(input, output, session) {
tab1 <- tableWithIconsServer(id = "tab1")
shiny::observeEvent(input$person, {
person_data <- person_list[[input$person]]
tab1$set_person(person_data)
})
}
shinyApp(ui, server)

needed_icons <- c(lapply(persons_data$Jaime, "[[", "icon"),
lapply(persons_data$Jessica, "[[", "icon")
)
needed_icons <- unique(needed_icons)
# requires that folder `icons` exists!
icons::icon_save(icons = needed_icons, path = "./icons")

app_icons <- icons::icon_set("path/to/icons")

Summary

In this post we went through a simple workflow for creating HTML tables with icons to display small-scale, heterogenous data that are not suitable for charting and don’t require interactive table widgets. We also saw how to use this type of visualization in a {shiny} application and how to include only a subset of required icons as resources for our web application.

Gist

The full code for the working application is available as a gist below: