Style Download Button with Image

Question

I want to show image in download button like this link - https://jsfiddle.net/flexmonster/67yx16ec/. In this link there is "To Excel" button, I want to replicate the same in shiny. I tried this with the code below but could not get success.

library(shiny)
library(shinydashboard)
ui <- shinyUI( dashboardPage(
  dashboardHeader(
    title="Styling Download Button"
  ),
  dashboardSidebar(
    tags$style(type="text/css", "#download1 {color: black; background-image: url(https://www.flexmonster.com/flexmonster/toolbar/img/toolbar/menu_xls_large.png);}"),
    downloadButton("download1", label="Download with style", class = "butt1")
  ),
  dashboardBody()
))
#server.r
server <- shinyServer(function(input, output) {})

shinyApp(ui, server)

user_1100107 · Answer

I would recommend a SVG icon. They have better quality. Download a SVG excel icon file and put it in the www subfolder of your app. For example I downloaded this one and I named it icon-excel.svg.

library(shiny)
library(shinydashboard)

ui <- shinyUI( dashboardPage(
  dashboardHeader(
    title = "Styling Download Button"
  ),
  dashboardSidebar(
    downloadButton(
      "download1",
      label = tagList(
        tags$img(src = "icon-excel.svg", width = "30", height = "30"),
        tags$span("Download", style = "color: #007732; font-weight: bold")
      )
    ),
    tags$script(HTML("$('#download1').css('padding-left',2).find('>i').remove();"))
  ),
  dashboardBody()
))
#server.r
server <- shinyServer(function(input, output) {})

shinyApp(ui, server)

Style Download Button with Image

1 Answers