Include icons in mermaid

[francesco086]

Hi, I would like to use the fantastic icons provided by mkdocs-material in a mermaid diagram.
Unfortunately this does not work. It also does not work the way suggested by mermaid.

Here the .md snippet:

:fontawesome-brands-gitlab: <!-- just to demonstrate that I set everything colrrectly to visualize icons -->

```mermaid
flowchart TD
    B[<img src='https://iconscout.com/ms-icon-310x310.png' width='40' height='40' />]
    B-->C["fa:fa-car"]
    B-->D[fa:fa-car]
    B-->F(":heart:")
    B-->G(:heart:);

This is the output I get

Any suggestion?

[squidfunk]

@facelessuser any ideas? A custom fence might do the trick, converting icons to SVGs, right? Some styling might be necessary.

[squidfunk]

Our customization guide explains how to add custom CSS. I think you should follow FontAwesome's guide explaining how to set up the web font and then add the appropriate CSS rules on the Mermaid classes. How exactly? I can't say without fiddling with it myself.

[facelessuser]

Would custom CSS be seen in the shadow DOM?

[squidfunk]

I've got another idea: Since you can use img tags, you might just use Material for MkDocs SVGs from a CDN (i.e. from GitHub):
https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons – You can then use the privacy plugin (optional) which will automatically download the icons from GitHub and replace them with links to local copies. Something like:

flowchart TD
    B[<img src='https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/material/library.svg' width='40' height='40' />]
    B-->C["fa:fa-car"]
    B-->D[fa:fa-car]
    B-->F(":heart:")
    B-->G(:heart:);

To find the image URL for an icon, just use our icon search to find the icon and then right-click on it to copy the image URL. Voila.

Would custom CSS be seen in the shadow DOM?

Hmm, good question. It might probably be necessary to rebuild the theme and adjust the styles here:
https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/components/content/code/mermaid/index.css

In any case, using icons as images (what they are) is likely to be the simplest approach.

[francesco086]

I am far from being a web developer, but I suppose one could write a javascript function that given the icon name (e.g. "library"), returns the HTML img object, correct?

And one could add this as an extra, following https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript

Is that right? Just to make the thing a little more readable... :)

[squidfunk]

If you're not a web developer, I'd say go for what I suggested in #4454 (reply in thread). Much simpler.