Mermaid built in icons do not lead

[alfredopalhares]

Context

Hello, first of all thank you so much for working on this project, it has provided me the best way to quickly deploy documentation that actually gets maintained and updated.

I am trying to use the architecture-diagrams, but whenever I try to use icons from iconify.design as described on the doc.

### Bug description

Given a sample diagram like does not render icons:
```plain
architecture-beta
    group api(logos:aws-lambda)[API]

    service db(logos:aws-aurora)[Database] in api
    service disk1(logos:aws-glacier)[Storage] in api
    service disk2(logos:aws-s3)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

In have tried to load the icons myself by adding this to docs/src/js/register-mermaid-icons.js:

import mermaid from "mermaid";

mermaid.registerIconPacks([
  {
    name: "logos",
    loader: () =>
      fetch("https://unpkg.com/@iconify-json/logos/icons.json")
        .then((res) => {
          if (!res.ok) throw new Error("Failed to fetch icons");
          return res.json();
        })
        .then((icons) => {
          console.log("Icons loaded:", icons);
          return icons;
        })
        .catch((err) => console.error("Error loading icons:", err)),
  },
]);

// Initialize Mermaid
mermaid.initialize({
  startOnLoad: true,
  theme: "default", // or "dark", "neutral"
  securityLevel: "loose", // Needed for inline HTML in Mermaid
});

And load it from mkdocs.yml:

extra_javascript:
  - path: src/js/register-mermaid-icons.js
    type: module

The codes does run, by mermad.registerIconPacks never runs.. what am I doing wrong ?

Related links

• Reporting a bug
  -https://mermaid.js.org/syntax/architecture.html

Reproduction

9.5.44-mermaid-icons.zip

Steps to reproduce

Build the reproduction sample or use the diagram and js provided on the bu

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[facelessuser]

You may want to check out this thread: facelessuser/pymdown-extensions#2499

[alfredopalhares]

@facelessuser I actually checked it, but I cannot reproduce that example for sure, I have checked your most up to date code too.

[facelessuser]

@alfredopalhares The main point of the conversation highlights two things. The first is that you need to register the icons with a name.

     mermaid.registerIconPacks([
       {
         name: "simple-icons",
         loader: () =>
           fetch("https://unpkg.com/@iconify-json/logos/icons.json").then(res =>
             res.json()
           )
       }
     ])

And when you reference them, you need to use the same name you referenced them with:

architecture-beta
    group api(simple-icons:aws-lambda)[API]

    service db(simple-icons:aws-aurora)[Database] in api
    service disk1(simple-icons:aws-glacier)[Storage] in api
    service disk2(simple-icons:aws-s3)[Storage] in api
    service server(simple-icons:aws-ec2)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

[squidfunk]

Converting to discussion - this is not officially supported.

[alfredopalhares]

Yes, I got that, but the part i am probably failing is the actually function, because on this example:

import mermaid from "mermaid";

mermaid.registerIconPacks([
  {
    name: "logos",
    loader: () =>
      fetch("https://unpkg.com/@iconify-json/logos/icons.json")
        .then((res) => {
          if (!res.ok) throw new Error("Failed to fetch icons");
          return res.json();
        })
        .then((icons) => {
          console.log("Icons loaded:", icons);
          return icons;
        })
        .catch((err) => console.error("Error loading icons:", err)),
  },
]);

// Initialize Mermaid
mermaid.initialize({
  startOnLoad: true,
  theme: "default", // or "dark", "neutral"
  securityLevel: "loose", // Needed for inline HTML in Mermaid
});

The code inside the function never gets printed on the browser console.
What am I doing wrong ?