如何在R Shiny中替换下载按钮默认图标为自定义PNG？

给你两个新手友好的解决办法，不用复杂的CSS知识就能搞定：

方法一：直接自定义下载按钮（最省心，不用CSS） #

不用Shiny默认的downloadButton，直接用HTML标签组合出带自定义图标的下载按钮，绑定下载逻辑就行：

UI 代码 #

library(shiny)

ui <- fluidPage(
  # 自定义下载按钮
  tags$a(
    href = "",
    target = "_blank",
    download = "iris_data.csv",  # 设置下载文件名
    # 嵌入自定义图片，width/height可以按需调整
    tags$img(src = "icons8-downloads-folder-48.png", width = "24px", height = "24px"),
    "下载数据"  # 按钮文字，不需要可以删掉
  ) %>% 
    downloadLink(outputId = "download_data")  # 绑定server端的下载逻辑
)

Server 代码 #

server <- function(input, output) {
  output$download_data <- downloadHandler(
    filename = function() {
      "iris_data.csv"
    },
    content = function(file) {
      # 替换成你要下载的实际数据
      write.csv(iris, file, row.names = FALSE)
    }
  )
}

shinyApp(ui, server)

方法二：修改默认下载按钮的图标（保留原按钮样式） #

如果你想保留Shiny默认下载按钮的样式，只是替换图标，用几行CSS就能搞定：

UI 代码 #

library(shiny)

ui <- fluidPage(
  downloadButton("download_data", label = "下载数据") %>% 
    tags$style(HTML("
      /* 隐藏默认的Font Awesome图标 */
      #download_data .fa {
        display: none;
      }
      /* 设置自定义图片为按钮背景 */
      #download_data {
        padding-left: 30px; /* 给图标留出位置 */
        background-image: url('icons8-downloads-folder-48.png');
        background-size: 20px 20px; /* 调整图标大小 */
        background-repeat: no-repeat;
        background-position: 5px center; /* 调整图标位置 */
      }
    "))
)

Server 代码 #

和方法一的server代码完全一样，不用改。

为什么原来的icon参数没用？ #

Shiny的downloadButton里的icon参数只接受shiny::icon()生成的字体图标（比如Font Awesome），直接传图片路径是不生效的，所以得用上面两种方法绕开这个限制。

内容的提问来源于stack exchange，提问作者shrub