From e2e2caa0e939e3c7527d5a5c99a73b2677c8175c Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Wed, 25 Sep 2024 11:56:06 +0530
Subject: [PATCH] fixed icon shape for large icon size

---
 .../src/rendering-util/rendering-elements/shapes/icon.ts  | 6 +++---
 .../rendering-elements/shapes/iconCircle.ts               | 8 ++++----
 .../rendering-elements/shapes/iconRounded.ts              | 8 ++++----
 .../rendering-elements/shapes/iconSquare.ts               | 8 ++++----
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
index a3e88d927..723792669 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
@@ -59,7 +59,7 @@ export const icon = async (
   if (node.icon) {
     const iconElem = shapeSvg.append('g');
     iconElem.html(
-      `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
+      `<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
     );
     const iconBBox = iconElem.node().getBBox();
     const iconWidth = iconBBox.width;
@@ -68,14 +68,14 @@ export const icon = async (
     const iconY = iconBBox.y;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : outerHeight / 2 - iconHeight - iconY - bbox.height - labelPadding})`
+      `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})`
     );
     iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }
 
   label.attr(
     'transform',
-    `translate(${-bbox.width / 2},${topLabel ? -height / 2 - bbox.height / 2 - labelPadding / 2 : height / 2 - bbox.height / 2 + labelPadding / 2})`
+    `translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
   );
 
   iconShape.attr(
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
index 14dab00b7..6303e5915 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -40,7 +40,7 @@ export const iconCircle = async (
   const iconElem = shapeSvg.append('g');
   if (node.icon) {
     iconElem.html(
-      `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
+      `<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
     );
   }
   const iconBBox = iconElem.node().getBBox();
@@ -49,7 +49,7 @@ export const iconCircle = async (
   const iconX = iconBBox.x;
   const iconY = iconBBox.y;
 
-  const diameter = Math.max(iconWidth, iconHeight) + padding * 2;
+  const diameter = Math.max(iconWidth, iconHeight) * Math.SQRT2 + padding * 2;
   const iconNode = rc.circle(0, 0, diameter, options);
 
   const outerWidth = Math.max(diameter, bbox.width);
@@ -65,12 +65,12 @@ export const iconCircle = async (
   const outerShape = shapeSvg.insert(() => outerNode);
   iconElem.attr(
     'transform',
-    `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - padding : outerHeight / 2 - iconHeight - iconY - padding - bbox.height - labelPadding})`
+    `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})`
   );
   iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   label.attr(
     'transform',
-    `translate(${-bbox.width / 2},${topLabel ? -diameter / 2 - bbox.height / 2 - labelPadding / 2 : diameter / 2 - bbox.height / 2 + labelPadding / 2})`
+    `translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
   );
 
   iconShape.attr(
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
index a0e7e3911..1744374b2 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
@@ -64,7 +64,7 @@ export const iconRounded = async (
   if (node.icon) {
     const iconElem = shapeSvg.append('g');
     iconElem.html(
-      `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
+      `<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
     );
     const iconBBox = iconElem.node().getBBox();
     const iconWidth = iconBBox.width;
@@ -73,14 +73,14 @@ export const iconRounded = async (
     const iconY = iconBBox.y;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - halfPadding : outerHeight / 2 - iconHeight - iconY - halfPadding - bbox.height - labelPadding})`
+      `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})`
     );
-    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
+    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
   }
 
   label.attr(
     'transform',
-    `translate(${-bbox.width / 2},${topLabel ? -height / 2 - bbox.height / 2 - labelPadding / 2 : height / 2 - bbox.height / 2 + labelPadding / 2})`
+    `translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
   );
 
   iconShape.attr(
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
index 53025581b..c89ffdd26 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -63,7 +63,7 @@ export const iconSquare = async (
   if (node.icon) {
     const iconElem = shapeSvg.append('g');
     iconElem.html(
-      `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
+      `<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
     );
     const iconBBox = iconElem.node().getBBox();
     const iconWidth = iconBBox.width;
@@ -72,14 +72,14 @@ export const iconSquare = async (
     const iconY = iconBBox.y;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - halfPadding : outerHeight / 2 - iconHeight - iconY - halfPadding - bbox.height - labelPadding})`
+      `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})`
     );
-    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
+    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
   }
 
   label.attr(
     'transform',
-    `translate(${-bbox.width / 2},${topLabel ? -height / 2 - bbox.height / 2 - labelPadding / 2 : height / 2 - bbox.height / 2 + labelPadding / 2})`
+    `translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
   );
 
   iconShape.attr(