Adding an image to Shiny action button

Question

I have a shiny action button but instead of font I wish to display an image. i have used tags$button for the action button. This displays a small grey box. instead i wish to display a "power" button.

 fluidRow(
      column(4,offset=11,
        tags$button(
        id = "reset_button",
        class="btn action-button"

        ))),

Thank you!

Answer 1

That's pretty easy with the argument icon of the function actionButton():

actionButton("goButton", "", icon = icon("play-circle"))

Alternatively, you can use the function icon() to add an icon to your button code:

tags$button(
          id = "reset_button",
          class="btn action-button",
          icon("close")

        )

Or you use the img() function to use your own:

    tags$button(
      id = "web_button",
      class = "btn action_button",
      img(src = "http://www.craftech.com/wp-uploads/2015/05/web.png",
               height = "50px")
    )

To get a more comprehensive list of possible icons, take a look at ?icon help page of the shiny package and the links in the See Also section.

An example app:

shinyApp(
  ui = shinyUI(
    fluidPage(
      fluidRow(
        actionButton("goButton", "", icon = icon("play-circle")),
        tags$button(
          id = "reset_button",
          class="btn action-button",
          icon("close")

        ),
        tags$button(
          id = "web_button",
          class = "btn action-button",
          tags$img(src = "http://images.all-free-download.com/images/graphicthumb/button_play_89677.jpg",
                   height = "50px")
        )
      ),
      fluidRow(
        textOutput("text")
      )
    )
  ),
  server = function(input, output, session){
    out <- reactiveVal("Nothing")
    observeEvent(input$goButton,{
      out("Go Pushed")
    })
    observeEvent(input$reset_button,{
      out("Resetted")
    })
    observeEvent(input$web_button,{
      out("From the web")
    })
    output$text <- renderText({out()})
  }
)