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

Answer 1

Here is another simple solution that worked for me:

actionButton(inputId = "A.button", label = NULL, style = "width: 50px; height: 50px;
background: url('MyImage.png');  background-size: cover; background-position: center;")

the image should be in the www folder inside the app's folder, background size in this case fits image to button size, alternatively you can use background-repeat: no-repeat; to make sure the image is not repeated to fill size, center center should center the image vertically and horizontally.

One could in principle also put the image as label, like:

label = img (src="MyImage.png", width="30", height="30"),

However, then the image could stuck out over the edge of the button compared to inserting it as background.

Answer 2

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()})
  }
)