Iconify Icons in Mermaid Diagrams

[ppalyska]

Hi!

I can't make icons working in architecture-beta diagram.
Instead of showing Icon it shows question marks.

I have following packages installed

  "dependencies": {
    "@docusaurus/core": "3.8.1",
    "@docusaurus/preset-classic": "3.8.1",
    "@iconify-json/logos": "^1.2.9",
    "@iconify/iconify": "^3.1.1",
    "@iconify/react": "^6.0.1",
    "@mdx-js/react": "^3.0.0",
    "clsx": "^2.0.0",
    "docusaurus-plugin-openapi-docs": "^4.5.1",
    "docusaurus-theme-github-codeblock": "^2.0.2",
    "docusaurus-theme-openapi-docs": "^4.5.1",
    "prism-react-renderer": "^2.3.0",
    "raw-loader": "^4.0.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "3.8.1",
    "@docusaurus/theme-mermaid": "^3.8.1",
    "@docusaurus/tsconfig": "3.8.1",
    "@docusaurus/types": "3.8.1",
    "prettier": "3.6.2",
    "typescript": "~5.6.2"
  },

service db(logos:aws-aurora)[Database] in api shows question mark
where <Icon icon="logos:aws-lambda" width="24" height="24" /> shows proper icon.

How can I make it working with default notation?

Best regards,
Patryk

[ppalyska]

NVM - found solution after I re-read this post #10508
and checked more carefully this example: github.com//discussions/10508

Solution for other:

1. Add following script in /src/scripts/mermaid_icons.js

import mermaid from 'mermaid';
import { icons } from '@iconify-json/logos';
mermaid.registerIconPacks([
  {
    name: icons.prefix, // To use the prefix defined in the icon pack
    icons,
  },
]);

and import it in docusaurus.config.ts

  clientModules: [require.resolve('./src/scripts/mermaid_icons.js')],