Some Font Awesome icons don't show in awesomeMarkers

[gdmcdonald]

I have problems showing some Font Awesome icons in leaflet using the code below. The "bicycle" icon is displayed as expected, but the "walking" icon is not showing, leaving an empty marker.

Is it because of the font-awesome version that comes installed with leaflet?

library(leaflet)

icoLst <- awesomeIconList(
  walk = makeAwesomeIcon(icon = "walking", library = "fa"),
  bike = makeAwesomeIcon(icon = "bicycle", library = "fa")
  )

data.frame(lat = rnorm(2), lng = rnorm(2), trs = c("walk", "bike")) %>%
  leaflet() %>% 
  addTiles() %>%
  addAwesomeMarkers(icon = ~ icoLst[trs])

Is there an error in my code, or it is the font versions as mentioned here?

Originally posted by @e-clin in #554 (comment)

[gdmcdonald]

Ok found a workaround - use the fontawesome package and make the icon text:

library(leaflet)
library(fontawesome) #devtools::install_github("rstudio/fontawesome")

icoLst <- awesomeIconList(
  walk = makeAwesomeIcon(text = fa("walking")),
  bike = makeAwesomeIcon(text = fa("bicycle"))
)

data.frame(lat = rnorm(2), lng = rnorm(2), trs = c("walk", "bike")) %>%
  leaflet() %>% 
  addTiles() %>%
  addAwesomeMarkers(icon = ~ icoLst[trs])

[e-clin]

Works perfectly for me! Gonna update my code using the fontawesome package. Thanks very much!

[datalowe]

Thanks for describing the workaround @gdmcdonald! I was able to implement it too and am using it in the meantime, though it's not entirely ideal.

I'll add my description of how I experienced the issue here, in case it helps clarify what is happening.

Problem description

Steps to reproduce problematic behavior

my_icons <- awesomeIcons(
  icon = "hamburger",
  iconColor = c('black', 'blue'),
  library = 'fa',
  markerColor = "white"
)

Then passing this list of icons to the icon parameter of the addAwesomeMarkers function when creating a leaflet map (leaflet(<data> %>% addTiles() %>% addAwesomeMarkers...)

Expected behavior

When I first did the above, I expected the Font Awesome's hamburger icon to be shown, like this:

I expected this behavior since when I searched Font Awesome's homepage for icons, the 'hamburger' icon showed up as being included in the suite of freely available icons.

For the expected hamburger icon to be correctly shown, the icon's corresponding HTML element class attribute needs to be set to class="fas fa-hamburger", since the 'solid' (the 's' in 'fas') version of the hamburger icon is the one that is freely available to use. It seems that this is different for Font Awesome v5 (in v4, all freely available icons were specified using just "fa fa-<icon_name>", as far as I've seen).

Current behavior

The hamburger icon is broken:

The icon's corresponding HTML element's class attribute is set to fa fa-hamburger.
(note: if I at this point use my browser to render the app, and I manually change the class attribute to fas fa-hamburger, the hamburger icon is correctly displayed. so the only thing that seems to be needed is that the first class can be specified)

Additional context

This problem is very similar to what is described in this Leaflet.Icon.Glyph issue on the Leaflet github. The proposed solution there is to specify the icon's prefix, which seems to replace the first class of the HTML element. But for the R leaflet package's awesomeIcons function, or makeAwesomeIcon as described above, there is no corresponding parameter for changing the prefix/first class. There is the extraClasses parameter, but even if I specify 'fas' there, the produced class attribute value in the HTML element is "fas fa fa-hamburger", and that doesn't work.

I used the 'hamburger' as an example above. There are also many other icons which are free to use, but unavailable if using the awesomeIcons function, since the prefix cannot be changed. Of course, @gdmcdonald described additional icons above.

Thoughts about possible solutions

From a user perspective it would make sense to use a style argument, where one could pass in 'solid' for the 'hamburger', or 'brands' for the 'raspberry-pi' icon. But I guess this functionality would then be very specific to Font Awesome. A prefix argument, which replaces the first class specified for the icon, would probably be more general but might be less intuitively named for users not familiar with what's going on in the background. Perhaps an argument like overrideFirstClass or something similar would make it more obvious to the user what is intended? Or the library argument could be remade such that it allows for e. g. 'fas' or 'fab' as a value (at the moment, trying this raises the error Error in verifyIconLibrary(library) : Invalid icon library names: fas). Using the library parameter like this could however also become confusing for the user, of course.

It would probably also help if there was some short information, in the function's help documentation or elsewhere, that explains to users that the Font Awesome v5 icons often necessitate overriding the default 'fa' class. Perhaps this is going too far trying to explain how a dependency, rather than the leaflet package itself, works though.

Edit: I reread the issue thread about this and I guess a lot of what I wrote above isn't very relevant since the package maintainer is waiting for another package to be updated: " will not be able to update the dependencies without having Leaflet.awesome-markers updating to handle FAv5". But at least it can give some explanation to other users wondering what's going on.

[ecorreig]

It's a workaround of the workaround, but I'm running my app in a server and I don't want to install "fa" from github (because then the deployments need devtools and a gazillion other installs), so what I did it's to just take this dataframe with all the information about fa icons and implement it manually, like so:

load("sysdata.rda")

leaflet::makeAwesomeIcon(
   text = fa_tbl[fa_tbl$name == "school", "svg"],
   iconColor = "black",
   markerColor = "red"
)

And it works nicelly.

[NetZissou]

Ok found a workaround - use the fontawesome package and make the icon text:

library(leaflet)
library(fontawesome) #devtools::install_github("rstudio/fontawesome")

icoLst <- awesomeIconList(
  walk = makeAwesomeIcon(text = fa("walking")),
  bike = makeAwesomeIcon(text = fa("bicycle"))
)

data.frame(lat = rnorm(2), lng = rnorm(2), trs = c("walk", "bike")) %>%
  leaflet() %>% 
  addTiles() %>%
  addAwesomeMarkers(icon = ~ icoLst[trs])

Nice solution. The shiny icon functions had never worked for some reason...