Bug: some font-awesome icons do not render in Mermaid diagrams (others do). Verified not a Mermaid bug.

[thegoatherder]

Describe the bug Numerous font-awesome icons fail to render in Mermaid diagrams. Initially it looked like the issue was affecting all icons containing multiple - characters - however, I've just found that fa:fa-battery-full is working, so no longer sure what is causing this.

To Reproduce Create a mermaid diagram using the following code:

graph TD
    subgraph Working Icons
        a[fa:fa-user]
        b[fa:fa-users]
        c[fa:fa-database]
        d[fa:fa-lock]
        e[fa:fa-table]
        f[fa:fa-comments]
        g[fa:fa-battery-full]
    end
    subgraph Broken Icons
        h[fa:fa-chart-line]
        i[fa:fa-chart-pie]
        j[fa:fa-chart-bar]
        k[fa:fa-luggage-cart]
    end

Expected behavior All icons in the code sample should render with their corresponding fa-icon (assuming the icon is in the free font awesome library, not Pro).

This is working in the Mermaid Live Preview, but not in the Markdown Preview Enhanced extension.

Screenshots

Version Information

• OS: Windows 10 20H2 (19042.1083)
• VSCode:

  Version: 1.57.1 (system setup)
  Commit: 507ce72a4466fbb27b715c3722558bb15afa9f48
  Date: 2021-06-17T13:28:07.755Z
  Electron: 12.0.7
  Chrome: 89.0.4389.128
  Node.js: 14.16.0
  V8: 8.9.255.25-electron.0
  OS: Windows_NT x64 10.0.19042

• Plugin Version: v0.5.22

[aranwe]

Stylesheet for font-awesome needs to be included as per the docs.