How to add an icon or custom image to nodes in treeInput of shinyWidgets?

This gives a basic tree. How could I add for example font-awesome icons or custom flags saved in a relative file path to these nodes?

library(shiny)
library(shinyWidgets)

df <- data.frame(continent = c(rep("Europe", 2), rep("Asia", 2)),
                 country = c("France", "Germany", "China", "Japan"))

mytree <- create_tree(df, c("continent", "country"))

ui <- fluidPage(
  shinyWidgets::treeInput("mytree", "mytree", mytree)
)

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

shinyApp(ui, server)

• In R you can use unicode characters in your script
  see this page Unicode question

• With the emoji package you can do the same with emoji, see cran emoji package

  Flag emoji are suitable in your example using the flag function in emoji

• For more complicated tasks consider vector graphics implemented in grImport2

library(shiny)
library(shinyWidgets)
library(emoji)

df <- data.frame(continent = c(rep("\U2727", 2), rep("\U24B8", 2)),
                 country = c(flag("France"), flag("Germany"), flag("China"), flag("Japan")))

mytree <- create_tree(df, c("continent", "country"))

ui <- fluidPage(
  shinyWidgets::treeInput("mytree", "mytree", mytree)
)

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

shinyApp(ui, server)

If using another package is OK, {shinyTree} would be an option.

It can use fontAwesome icons or a set of {shinyTree} builtin icons.
You can also use HTML for item labels, thus offering to source your own images.

library(shiny)
library(shinyTree)

ui <- fluidPage(
  shinyTree::shinyTree('myShinyTree',
                       checkbox = TRUE,
                       themeIcons = FALSE,
                       theme = 'proton'
                       )
)

server <- function(input, output, session) {
  df <- data.frame(continent = c(rep("Letteria", 2), rep("Numberalia", 1)),
                   country = c("<img src = 'flag_A.png' width = '50px' /> A-Land", 
                               "<img src = 'flag_B.png' width = '50px' /> B-Country",
                               "<img src = 'flag_1.png' width = '50px' /> Uni Kingdom"
                               )
                   )

  output$myShinyTree <-  renderTree({
    tree_list <- dfToTree(df) ## dfToTree converts df into a hierarch. list
    attr(tree_list, 'stopened') <- TRUE
    ## set the 'stopened' attribute on each node to uncollapse the whole tree
    tree_list <- tree_list |>
      Map(f = \(.) {attr(., 'stopened') <- TRUE; .})

  })
}

shinyApp(ui, server)

Remember to put static content (here: the image files) in a subfolder www of your app's folder, so that Shiny will find it. Do not include the www in your path though. Example: reference file www/flag_A.png as <img src = 'file.png'>.

Output with custom images:

• find a repository of country flags here

• With lots of symbols it might be convenient to add a class to your images, e.g. <img class='flag' ...> so that you can apply size, transparency etc. to all flags via CSS.