How to allow font awesome icons in mermaid diagrams?

[LandonTClipp]

Mermaid diagrams say that it supports font awesome icons: https://mermaid.js.org/syntax/flowchart.html#basic-support-for-fontawesome

However you can see that when copy-pasting their code into material, the icons disappear exactly like in #1698

The docs for mermaid do note that they only support versions 4 and 5 of font-awesome, while material uses 6.3.0 as of 2023-03-03, so it seems likely it's just a version mismatch.

Does anyone know of a way to add versions 4 and 5 of font-awesome so mermaid can use this? I am not a web dev and know almost nothing about javascript so any help would be appreciated ❤️

[squidfunk]

You would need to integrate FontAwesome yourself, since Material for MkDocs doen't use icon fonts since version 5 – only SVGs – as this allows for custom icons and deeper integration in general.

It should be possible to use the v4 or v5 FontAwesome icon font along side our bundled v6 icons, since those are two entirely different methods of embedding. Thus, I think adding the FontAwesome CSS via additional CSS should be sufficient.

[LandonTClipp]

Thanks for the info, I'll give it a try. Thanks for the great project as well, I'll be sending some sponsorship support your way! Note, I'll update this discussion with an example of how to do this, should I find the time to figure it out.

[LandonTClipp]

I was playing around with this. I downloaded the v5 fontawesome assets: https://fontawesome.com/v5/download

I put this into my mkdocs project and pointed the extra_css variable to the all.css provided by fontawesome. I built the project and I was able to successfully call upon the v5 icons from within a text body outside of a mermaid diagram (meaning I could decorate text using the CSS class syntax: https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/?h=icon#docsstylesheetsextracss). I proved that I could reference the v5 icons because the icon would disappear from the text body when I didn't package v5 fontawesome in extra_css.

The way this gets rendered in HTML is:

<i class="fa fa-cloud"></i>

I would insert the exact same icon in my mermaid diagram using their syntax. The HTML would get rendered as:

<span class="nodeLabel"><i class="fa fa-cloud"></i> example text in a mermaid diagram node</span>

You can see it adding the exact same i element that works outside of a diagram. But, the icon would not appear in the diagram. I'm not sure if it's getting hidden behind some other element or if it's not rendering at all.

I wasn't sure how to proceed after this. Someone can maybe help push this along from where I left off.

[VincenzoGalante]

Struggeling with the same. @LandonTClipp were you able to find a solution? I would like to implement fontawesome icons in my mermaid diagrams.

[kamilkrzyskow]

Hey @VincenzoGalante,
currently only possible with a hacky hook, as the mermaid content is within a shadow root, and doesn't have access to CSS defined on your page.

Reference (hook example in one of them):

• Mermaid with Icons #6778 (reply in thread)
• Mermaid config issue #6984 (reply in thread)