How can I include icons in Mermaid.js diagrams in Material for MkDocs?

1.2k views Asked by At

Using the Mermaid.js live editor, I can create a simple diagram like this:

flowchart LR
    A[fas:fa-tree A] --> B(far:fa-gem B)

Which is displayed as:

enter image description here

However, when I copy this to my website which uses Material for MkDocs, the same code is displayed without the icons, as:

diagram2

I have the Mermaid and Emoji Markdown extension set up, and I am able to display other icons on the same page (not in a diagram), such as :smile: and :material-server:. I even downloaded the free Font Awesome icons and can display them as described in Using Local Custom Icons, e.g. :fa-regular-moon:. However, none of these show up when used within the Mermaid diagram.

Mermaid 10.1 intruduced Markdown formatting, which may permit icons too, but the latest Material for MkDocs is 9.4.8, which only includes Mermaid.js 9.4.3 (source).

These are pages which seemed applicable but did not lead to a working solution for me:

How can I include icons in Mermaid.js diagrams in Material for MkDocs?

1

There are 1 answers

3
Sam Morris On

A co-worker suggested the following, which is basically using an in-line HTML img tag to pull in the icon image, saved to the project's images folder.

 flowchart LR
     A["Here is how an image is done in mkdocs mermaid diagrams"]
     A --> B[<img src='images/box.png' width='25' height='25' /> This is a box]

So I have been going to the font sites, downloading the icons as .svg files and adding them in that way.