docs: Add iconify docs

.cspell/libraries.txt

@@ -30,6 +30,7 @@ Foswiki
 Gitea
 graphlib
 Grav
+icones
 iconify
 Inkdrop
 jiti

docs/syntax/architecture.md

@@ -191,4 +191,58 @@ architecture-beta
     bottom_gateway:T -- B:junctionRight
 ```
 
-## Configuration
+## Icons
+
+By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
+Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below.
+
+The icon packs available can be found at [icones.js.org](https://icones.js.org/).
+
+Using JSON file directly from CDN:
+
+```js
+import mermaid from 'CDN/mermaid.esm.mjs';
+
+// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`,
+// to prevent mermaid from starting before the icons are loaded
+mermaid.initialize({
+  startOnLoad: false,
+  logLevel: 0,
+});
+const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json');
+mermaid.registerIconPacks(await logos.json());
+mermaid.init();
+```
+
+Using packages and a bundler:
+
+```js
+import mermaid from 'mermaid';
+// npm install @iconify-json/logos
+import { icons as logos } from '@iconify-json/logos';
+
+mermaid.initialize({
+  startOnLoad: false,
+  logLevel: 0,
+});
+mermaid.registerIconPacks(logos);
+mermaid.init();
+```
+
+After the icons are installed, they can be used in the architecture diagram by using the format "prefix:icon-name", where prefix comes from the icon pack you selected.
+
+````
+```mermaid
+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
+```
+````

packages/mermaid/src/docs/syntax/architecture.md

@@ -153,4 +153,58 @@ architecture-beta
     bottom_gateway:T -- B:junctionRight
 ```
 
-## Configuration
+## Icons
+
+By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
+Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below.
+
+The icon packs available can be found at [icones.js.org](https://icones.js.org/).
+
+Using JSON file directly from CDN:
+
+```js
+import mermaid from 'CDN/mermaid.esm.mjs';
+
+// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`,
+// to prevent mermaid from starting before the icons are loaded
+mermaid.initialize({
+  startOnLoad: false,
+  logLevel: 0,
+});
+const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json');
+mermaid.registerIconPacks(await logos.json());
+mermaid.init();
+```
+
+Using packages and a bundler:
+
+```js
+import mermaid from 'mermaid';
+// npm install @iconify-json/logos
+import { icons as logos } from '@iconify-json/logos';
+
+mermaid.initialize({
+  startOnLoad: false,
+  logLevel: 0,
+});
+mermaid.registerIconPacks(logos);
+mermaid.init();
+```
+
+After the icons are installed, they can be used in the architecture diagram by using the format "prefix:icon-name", where prefix comes from the icon pack you selected.
+
+````
+```mermaid
+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
+```
+````