Use of open source icons in Shiny

[dmenne]

Using icons is Shiny is a mystery for me:

• Fontawesome sometimes works, but there is version-confusion and so many of possible free icons are not available. Getting a list of available outcome requires a difficult to find macro and is still an open issue on github.

• glyphicons do not render in my app in the current version; the issue is also open on github since 2018.

• Joe Cheng mentions the use of a open source icons in package 'icon' which he would prefer to be used. The library looks good, has some mentioning of Shiny, but not a single example and several open issues on how to use is in Shiny

Can anyone provide an example how to use the icons in package 'icon'?

[mitchelloharawild]

The {icons} package (previously named {icon} as you indicate above) allows you to insert any SVG image as an icon in web documents (including R Markdown and shiny).

The workflow for using the package is as follows:

# Load the package
library(icons)

# Obtain an icon set (only needed once, like installing a package)
# download_fontawesome()

# Access/use the icons
fontawesome$solid$rocket

This will include fontawesome's solid rocket in the document you are writing (either R Markdown or shiny). I note that it is a bit harder to use with shiny currently, as the icons you have downloaded locally (via download_fontawesome() will not be available on the remote server). This can also be problematic for sharing R Markdown code with others, who may not have installed the icon set(s) yet. Improve deployment process for shiny apps · Issue #37 · mitchelloharawild/icons · GitHub discusses some ideas for having icons self contained or cached within projects, which will simplify this issue.

[dmenne]

Thanks, @mitchelloharawild (who is the author of the package). I still don't get it:

library(shiny)
library(icons)

# using fontawesome$solid$rocket in console works fine
ui <- fluidPage(
  actionButton("rocket", "Rocket", icon =  icon(fontawesome$solid$rocket))
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

does not show the icon. As far I know, these icons must use some css stuff, see \R\library\shiny\www\shared\fontawesome\css

[nirgrahamuk]

I believe the issue is that shiny::actionButton doesn't accomodate svg icons by its icon parameter, but you can bypass it like so

library(shiny)
library(icons)

#download_fontawesome()

ui <- fluidPage(
  actionButton("rocket1", "Rocket 1", icon=NULL,width=NULL,img(icons::fontawesome$solid$rocket)),
  actionButton("rocket2", "Rocket 2", icon=NULL,width=NULL,img(icons::fontawesome("rocket", style = "solid")))
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

[dmenne]

Superb workaround! When used together with default icons, its a bit confusing that the positioning is different.
Here the version for twins:

library(shiny)
library(icons)

# using fontawesome$solid$rocket in console works fine
ui <- fluidPage(
  actionButton("rocket", "Rocket", icon = icon("rocket"), width = NULL,
               img(fontawesome$solid$rocket)
  ),
  actionButton("default", "default", icon = icon("rocket")
  )
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

[nirgrahamuk]

Happy to help.
Try

library(shiny)
library(icons)

# using fontawesome$solid$rocket in console works fine
ui <- fluidPage(
  actionButton("r1", div("Rocket",style="float:right;padding-left:3px;"),icon=NULL, width = NULL,
               img(fontawesome$solid$rocket)
  ),
  actionButton("d1", "Rocket", icon = icon("rocket")
  )
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

[dmenne]

I had just put this into my imported css file for global use....

[nirgrahamuk]

you could make yourseslf a custom wrapper for convenience:

library(shiny)
library(icons)

myButton <- function(inputId,label,icon,width=NULL){
  actionButton(inputId, div(label,style="float:right;padding-left:3px;"),icon=NULL, width = width,
               img(icon))
}
# using fontawesome$solid$rocket in console works fine
ui <- fluidPage(
  actionButton("r1", div("Rocket",style="float:right;padding-left:3px;"),icon=NULL, width = NULL,
               img(fontawesome$solid$rocket)
  ),
  actionButton("d1", "Rocket", icon = icon("rocket")
  ),
  myButton("r2","Rocket",fontawesome$solid$rocket)
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

I think I'll stop there !