easyButton remove icons in other elements

[geoabi]

If a easyButton is added to the map, some font awesome icons disappear. Below is an example where the action buttons show the icons correctly but after the map is rendered, the icons disappear. I added a one second delay before rendering the map to show how the icons on buttons are displayed correctly before the map is rendered with an easy button. 

This issue only affects a specific set of font awesome icons, but all of the affected icons will disappear in the entire app.

library(shiny)
library(leaflet)

ui <- fluidPage(
  leafletOutput("mymap"),
  p(),
  actionButton("recalc", "New points", icon = icon("sign-out")),
  actionButton("edit", "Edit points", icon = icon("pencil"))
)

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

  points <- eventReactive(input$recalc, {
    cbind(rnorm(40) * 2 + 13, rnorm(40) + 48)
  }, ignoreNULL = FALSE)

  output$mymap <- renderLeaflet({
    Sys.sleep(1)
    leaflet() %>%
      addProviderTiles(providers$Stamen.TonerLite,
                       options = providerTileOptions(noWrap = TRUE)
      ) %>%
      addMarkers(data = points())%>%
      addEasyButton(easyButton(
       icon = "fa-home", title = "Open Navegation Panel",
       onClick = JS(paste0('function(btn, map){ }'))
      ))
  })
}

shinyApp(ui, server)

I'm using CRAN versions of Shiny 1.6.0 and Leaflet 2.0.4.1 on R 4.0.3.

[archaeothommy]

I have the same problem and was able to narrow it down on whether the icon in the button is rendered or not. Replacing in the example of @geoabi icon = "fa-home" with e.g. icon = "home" would produce a functional button without icon but renders all other icons in the app. (CRAN versions of Shiny 1.6.0 and Leaflet 2.0.4.1 on R 4.1.0.)

The problem occurred after updating to Shiny 1.6. Hence it might be caused in the changes was of how shiny is handling icons now.

[rfineman]

shiny (via fontawesome package) is importing version 5.15.3, whereas leaflet is importing 4.7.0 and seems to take precedent. From what I can get, it seems that this dependency is only added when using the easyButton and explicitly when the icon has a "fa-" in the name (see plugin-easybutton.R). This is why @archaeothommy's comment about removing the "fa-" does what it does.

Would suggest we update the font-awesome version, however in the meantime, you can get around this issue by using the font-awesome unicodes. Not the sexiest of solutions, however looks something like this:

library(shiny)
library(shinyjs)
library(leaflet)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  shinyjs::inlineCSS(list(
    ".home-icon" = '-webkit-font-smoothing: antialiased;display: inline-block;font-style: normal;font-variant: normal;text-rendering: auto;line-height: 1;',
    ".home-icon:before" = 'font-family: "Font Awesome 5 Free"; content: "\\f015"; font-weight: 900;'
  )),
  leafletOutput("mymap"),
  p(),
  actionButton("recalc", "New points", icon = icon("sign-out")),
  actionButton("edit", "Edit points", icon = icon("pencil"))
)

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

  points <- eventReactive(input$recalc, {
    cbind(rnorm(40) * 2 + 13, rnorm(40) + 48)
  }, ignoreNULL = FALSE)

  output$mymap <- renderLeaflet({
    Sys.sleep(1)
    leaflet() %>%
      addProviderTiles(providers$Stamen.TonerLite,
                       options = providerTileOptions(noWrap = TRUE)
      ) %>%
      addMarkers(data = points())%>%
      addEasyButton(easyButton(
        icon = htmltools::tags$i(class = "home-icon"),
        title = "Open Navegation Panel",
        onClick = JS(paste0('function(btn, map){ }'))
      ))
  })
}

shinyApp(ui, server)

[shahreyar-abeer]

Is there a way to make leaflet not load the fontawesome v4.7.0?