如何在kable中结合使用Shiny图标？

在不含RMarkdown的Shiny应用中，使用shiny::icon替代HTML实体字符为表格列添加可视化标识时，图标无法显示，以下是具体解决方案：

问题根源 #

shiny::icon生成的是带有Font Awesome类名的<i>标签，直接用knitr::kable + kableExtra渲染时，要么未正确加载Font Awesome字体资源，要么生成的HTML未被Shiny正确解析渲染。

解决方案一：使用DT包（推荐） #

DT是Shiny中适配性更好的表格组件，原生支持HTML渲染，且会自动处理Font Awesome图标：

library(shiny)
library(DT)

ui <- fluidPage(
  DTOutput("icon_table")
)

server <- function(input, output) {
  output$icon_table <- renderDT({
    # 构造数据
    dat <- data.frame(
      what = letters[1:15],
      value = rnorm(15)
    )
    
    # 生成图标列
    dat$direction <- ifelse(
      abs(dat$value) < 0.1,
      as.character(shiny::icon("circle-right")),
      ifelse(dat$value < 0, as.character(shiny::icon("circle-down")), as.character(shiny::icon("circle-up")))
    )
    
    # 渲染表格，设置escape=FALSE允许HTML解析
    datatable(dat, escape = FALSE)
  })
}

shinyApp(ui, server)

解决方案二：继续使用kable + kableExtra #

如果坚持使用kable系列工具，需要手动确保Font Awesome资源加载，并将生成的HTML转换为Shiny可识别的对象：

library(shiny)
library(knitr)
library(kableExtra)

ui <- fluidPage(
  # 手动引入Font Awesome CSS（适配shiny::icon使用的版本，此处为v6.4.0）
  tags$link(rel = "stylesheet", href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"),
  uiOutput("icon_table")
)

server <- function(input, output) {
  output$icon_table <- renderUI({
    dat <- data.frame(
      what = letters[1:15],
      value = rnorm(15)
    ) |> transform(
      direction = ifelse(
        abs(value) < 0.1,
        as.character(shiny::icon("circle-right")),
        ifelse(value < 0, as.character(shiny::icon("circle-down")), as.character(shiny::icon("circle-up")))
      )
    )
    
    # 生成HTML表格并转换为Shiny可渲染对象
    dat |> 
      kable(format = "html", escape = FALSE) |> 
      kable_styling() |> 
      HTML()
  })
}

shinyApp(ui, server)

关键要点 #

• escape=FALSE是核心：必须关闭HTML转义，让表格渲染器识别图标标签。
• Font Awesome依赖：Shiny默认包含Font Awesome，但如果使用较新的图标样式（如fa-solid类），需确保加载对应版本的CSS。
• DT更适配Shiny：DT无需额外处理HTML转换，且性能和交互性更优，推荐在Shiny应用中优先使用。

内容的提问来源于stack exchange，提问作者Karsten W.