feat(arch): implemented group icons

demos/architecture.html

@@ -19,7 +19,7 @@
     <h2>Simple diagram with groups</h2>
     <pre class="mermaid">
       architecture
-        group api[API]
+        group api(cloud)[API]
 
         service db(database)[Database] in api
         service disk1(disk)[Storage] in api

packages/mermaid/src/diagrams/architecture/architectureRenderer.ts

@@ -265,7 +265,7 @@ function layoutArchitecture(
           selector: '.node-group',
           style: {
             // @ts-ignore Incorrect library types
-            padding: '30px',
+            padding: '40px',
           },
         },
       ],

packages/mermaid/src/diagrams/architecture/svgDraw.ts

@@ -150,8 +150,23 @@ export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
         .attr('height', h)
         .attr('class', 'node-bkg');
 
+      const groupLabelContainer = groupsEl.append('g');
+      let shiftedX1 = x1;
+      let shiftedY1 = y1;
+      if (data.icon) {
+        const bkgElem = groupLabelContainer.append('g');
+        // TODO: magic number
+        getIcon(data.icon)?.(bkgElem, 32);
+        bkgElem.attr(
+          'transform',
+          'translate(' + (shiftedX1 + halfIconSize + 1) + ', ' + (shiftedY1 + halfIconSize + 1) + ')'
+        );
+        shiftedX1 += 32;
+        // TODO: proper values once dynamic sizes are implemented
+        shiftedY1 += 4;
+      }
       if (data.label) {
-        const textElem = groupsEl.append('g');
+        const textElem = groupLabelContainer.append('g');
         createText(
           textElem,
           data.label,
@@ -170,7 +185,7 @@ export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
 
         textElem.attr(
           'transform',
-          'translate(' + (x1 + halfIconSize + 4) + ', ' + (y1 + halfIconSize + 2) + ')'
+          'translate(' + (shiftedX1 + halfIconSize + 4) + ', ' + (shiftedY1 + halfIconSize + 2) + ')'
         );
       }
     }