Why do some icons from fontawesome in mermaid work and some do not?

Question

In a revealjs quarto presentation file using Rstudio, when I do:

```{mermaid}
flowchart LR
    D(fa:fa-phone)-->C[fa:fa-house]
```

and knit the file, I get this in the output:

Why does the first icon work, and the second icon not?

Answer 1

Try with adding the Font Awesome CDN in the header,

---
title: FA icon & Mermaid in Quarto Revealjs
format: revealjs
include-in-header: 
  text: |
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
---

## First Slide

```{mermaid}
flowchart LR
    D(fa:fa-phone)-->C[fa:fa-house]
```


```{mermaid}
flowchart LR
    D(fa:fa-phone)-->C[fa:fa-earth-americas]
```

---

---

But note that, As showed in @Julian answer, using fontawesome extension should be a preferrable choice. You just need to use a shortcode with a random icon (to enable the extension for the document during rendering time) and then hide it (either using html comment, as shown in @Julian answer or using hidden pandoc div).

So you can try the following also,

---
title: fa icons
format: revealjs
---

## First Slide

::: hidden

{{< fa thumbs-up >}}

:::


```{mermaid}
flowchart LR
    D(fa:fa-phone)-->C[fa:fa-house]
```

```{mermaid}
flowchart LR
    D(fa:fa-phone)-->C[fa:fa-earth-americas]
```