Search code examples
rshinyfont-awesome

Render icon and text together from server in Shiny

I cannot manage to have html text and icon together rendered by the Shiny server in the main panel unless I render the icon in the UI independently of the server as well. Here is a minimal example:

library(shiny)

ui <- fluidPage(
  titlePanel("Icon test app"),
  sidebarLayout(
    
    sidebarPanel(
    ),
    
    mainPanel(
      
          htmlOutput("restart"),

          h3("Refresh icon from ui()",icon("refresh"))
    )
  )
)

server <- function(input, output) {
 observe({ output$restart = renderText(

    paste0("<h3>",
           "Refresh icon from server()",
           icon("refresh"),
           "</h3>"
    )
  )
 })
}

shinyApp(ui = ui, server = server)

enter image description here

Now the same example without the text and icon rendered by the ui, which shows then the text rendered by the server alone, i.e. without icon:

library(shiny)

ui <- fluidPage(
  titlePanel("Icon test app"),
  sidebarLayout(
    
    sidebarPanel(
    ),
    
    mainPanel(
      
          htmlOutput("restart"),

          # h3("Refresh icon from ui()",icon("refresh"))
    )
  )
)

server <- function(input, output) {
 observe({ output$restart = renderText(

    paste0("<h3>",
           "Refresh icon from server()",
           icon("refresh"),
           "</h3>"
    )
  )
 })
}

shinyApp(ui = ui, server = server)

enter image description here

Help appreciated, thanks!

Solution

  • The code for icon() when run inside the ui function adds an html dependency to the rendering layer. If you just use the icon() function in the server, the dependency isn't added to the html. You can fix this by manually injecting the dependency into your UI. Add fontawesome::fa_html_dependency() to your UI layout. For example this should work:

    ui <- fluidPage(
  fontawesome::fa_html_dependency(),
  titlePanel("Icon test app"),
  sidebarLayout(    
    sidebarPanel(
    ),    
    mainPanel(      
      htmlOutput("restart")
    )
  )
)