Rendering kable/formattable in Quarto markdown, icons don't show up in output HTML

Question

I'm trying to render a table in R Quarto where one of the columns contains a color-coded symbol. When I run it within RStudio, everything looks as expected, but when I hit render the symbols are missing entirely. In RStudio: table with correct color-coded symbols in second column In the HTML: table with blank second column

I switched from using formattable to using kable, I made sure to add results = "asis", format = "html", and escape = F, as I saw mentioned around a few times, but nothing changed. Here is the code that created the pictures:

---
title: "stackoverflow"
format: 
  html:
    embed-resources: true
    page-layout: full
    fig-width: 20
    fig-height: 20
    
editor: visual
---

```{r Package Imports}
#| include: false
#| echo: false

options(knitr.table.format = "html") 

library(dplyr)
library(lubridate)
library(DBI)
library(formattable)
library(tidyverse)
library(knitr)
library(data.table)
library(kableExtra)

```

```{r table, echo = FALSE, results = "asis"}

df <- data.frame(name = c("red", "yellow", "green"),
                 symbol = c(-0.5, -0.01, 0.5))

#Creating a custom formatter for the color + asterisk
custom_indicator <- formatter("span", style = x ~ style(color = ifelse(x < -0.1, "red",
                                                ifelse(x >= 0, "green", "yellow"))),
                              x ~ icontext(sapply(x, function(x) "asterisk")))

df %>% 
  mutate(symbol = custom_indicator(symbol)) %>% 
  kableExtra::kbl(format = "html", escape = F) %>% 
  kableExtra::kable_styling()
```

Answer 1

According to this SO question, Bootstrap 4 dropped support for glyphicons. I don't know, though, if it entirely explains why they show up in RStudio while they are completely omitted in the html output.

One of the proposed solutions in the SO question is to link to Bootstrap 3, but I haven't got it to work on my machine.

Alternatively, you could use icons from the FontAwesome library using the fontawesome R package. In my attempt, the formattable package didn't escape the tags properly, so I just decided to write a custom function – if you have a solution using formattable, let me know.

---
title: "stackoverflow"
format: 
  html:
    embed-resources: true
    page-layout: full
    fig-width: 20
    fig-height: 20
    
editor: visual
---

```{r Package Imports}
#| include: false
#| echo: false

options(knitr.table.format = "html") 

library(dplyr)
library(kableExtra)
library(fontawesome)

```

```{r table, echo = FALSE}

df <- data.frame(
  name = c("red", "yellow", "green"),
  symbol = c(-0.5, -0.01, 0.5)
)

custom_indicator <- function(symbol) {
  sapply(symbol, function(x)
    fa("star-of-life", fill = if(x < -0.1) "red" else if (x < 0) "yellow" else "green")
  )
}

df %>% 
  mutate(symbol = custom_indicator(symbol)) %>%
  kableExtra::kbl(format = "html", escape = F) %>% 
  kableExtra::kable_styling()
```