Icon as label in loadingButton

[bartekch]

Is it possible to provide an icon to appear on loadingButton as a label? I've tried this (shinyFeedback 0.4.0):

library(shiny)
library(shinyFeedback)
shinyApp(
  ui = basicPage(
    useShinyFeedback(),
    loadingButton(
      inputId = "l",
      label = HTML(as.character(icon("play")))
    )
  ),
  
  server = function(input, output, session) {
    observeEvent(input$l, {
      Sys.sleep(3)
      resetLoadingButton("l")
    })
  }
)

It works initially, but after reset there is HTML as a text instead of an icon.

It would be great if there is an option to do it, similarly to icon parameter for actionButton.

[phoward38]

@bartekch This can be done with the class & loadingClass arguments, where you provide the icon HTML:

library(shiny)
library(shinyFeedback)
shinyApp(
  ui = basicPage(
    useShinyFeedback(),
    loadingButton(
      inputId = "l",
      label = "",
      class = "fa fa-play btn-primary",
      loadingClass = "fa fa-play"
    )
  ),

  server = function(input, output, session) {
    observeEvent(input$l, {
      Sys.sleep(3)
      resetLoadingButton("l")
    })
  }
)

[bartekch]

@phoward38 thanks, works!

Although the button looks a bit uglier than those with btn class, Is it possible to achieve the same button style? I guess I could provide my own CSS, but maybe there is some better option.

[phoward38]

@bartekch You can add the class btn-sm to both class & loadingClass arguments to achieve the same look. I'll keep this issue open to reference when adding an icon argument to loadingButton

[bartekch]

@phoward38 great, thanks! It works perfectly. Although indeed icon argument would be more convenient, so I'm looking forward to this feature.

[jeffreyhanson]

In case this is helpful for anyone else facing a similar issue, I was able to create a nice-looking loading button with a single icon (i.e. minus symbol) with the following R code:

shinyFeedback::loadingButton(
  inputId,
  class = "btn btn-sm fa fa-lg fa-solid fa-minus",
  loadingClass = "btn btn-sm fa fa-lg",
  style = "font-weight: 800;",
  label = "",
  loadingLabel = ""
)

Note that I needed to specify the font-weight style for the icon to be visible - I don't why.

[phoward38]

@bartekch @jeffreyhanson I've created a PR for this fix that should be merged shortly, but until then you can use the feature/loadingButton_icon branch.

remotes::install_github("merlinoa/shinyFeedback", ref = "feature/loadingButton_icon")

[jeffreyhanson]

Awesome - thank you very much @phoward38!

[phoward38]

@jeffreyhanson No problem! Let me know if you find any bugs using that branch but it's been tested, so the icon argument should work as it does on typical shiny buttons.

@bartekch Leaving issue open until PR is merged.