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

Question

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)

Just ordinary png of svg files for example, saved locally on my machine. For example, assume I have flags saved on my machine for the 50 states of the US as png or svg from http://www.flagchart.net/flags/us-state.html. — Lennyy, Feb 15 '23 at 17:56

score 3 · Answer 1 · answered Feb 14 '23 at 21:40

3

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)

answered Feb 14 '23 at 21:40

Wael

1,640
1
9
20

1

Thanks for your prompt reply, this looks good. Unfortunately for my real dataset the `flag` function from `emoji` does not contain all necessary flags, for example when I would like to use custom flags for a state or city. Do you suggest to use grImport2 for this or do you have a simpler solution in mind for flags/images saved locally? – Lennyy Feb 15 '23 at 09:15
Thank you @Lennyy for the feed back I also think that `emoji ` is a convenient package to add some icons to text the `grImport2` is for adding icons to R plots I don't know if there is a way add a customized emoji – Wael Feb 16 '23 at 12:24

I_O · Answer 2 · 2023-02-19T22:16:51.443

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.

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

2 Answers2