mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.63k stars 6.05k forks source link

Material Design icons are not shown #5594

Open amusarra opened 6 days ago

amusarra commented 6 days ago

Description

Reading the documentation https://mermaid.js.org/syntax/mindmap.html#icons-and-classes trying on LiveEditor and Markdown, I don't get the expected result, as documented. The icons are not displayed.

Steps to reproduce

  1. With this code
mindmap
    Root
        A
        ::icon(fa fa-book)
        B(B)
        ::icon(mdi mdi-language-java)

Code 1 - Mindmap code with mdi icon

the result should now be this

image

On the live editor, the result is this

image

The same behavior occurs when used within a Markdown document.

  1. With this command mmdc -i /tmp/test.mmd -o output.png -t dark -b transparent where the file /tmp/test.mmd referer to the Code 1, the result is incorrect, that is, the java language icon is not shown.
image

Screenshots

No response

Code Sample

Link to Live Editor https://mermaid.live/edit#pako:eNplUMFqwzAM_ZWgUwvOcAhdF99WtuMu2634osZK6rW2gmePtSH_PjeldLAHEo-nJwlphJYNgQJnvXE4aF9kvDPHK7vg-U6Vsi37RYdFh-WO-bC81zaLzfKf0xlb5CiP6PuEPZWf-I3ZBgIcBYfW5N3jpU1D3JMjDSpTg-GgQfsp-zBF_jj5FlQMiQSkwWCkF4t9QHcTB_SgRvgBJQWccn6onup1U69k01RSyvpxNQk4M-eOSgAZGzm8XU-fPzCP2M71v2teZ-NNC5z6PagOj180_QLoVWAY

Setup

Suggested Solutions

No response

Additional Context

No response

mttfranci commented 6 days ago

I noticed the same behaviour described by @amusarra for a new diagram I'm working on.

It would be helptful, at least, to note in the documentation if and which additional configuration is needed to make the example worl.

Thanks in advance.