From 0b8f27e1d2c9ecb96c44f01d50e5e1402a7483df Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Mon, 7 Oct 2024 15:52:12 +0530
Subject: [PATCH] Updated icon shape to use css color style instead of stroke

---
 .../src/rendering-util/rendering-elements/shapes/icon.ts    | 2 +-
 .../rendering-util/rendering-elements/shapes/iconCircle.ts  | 6 +++---
 .../rendering-util/rendering-elements/shapes/iconRounded.ts | 6 +++---
 .../rendering-util/rendering-elements/shapes/iconSquare.ts  | 6 +++---
 4 files changed, 10 insertions(+), 10 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 d87efaad1..cd0e34669 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
@@ -77,7 +77,7 @@ export const icon = async (
           : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY
       })`
     );
-    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
+    iconElem.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`);
   }
 
   label.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 1e18174df..74d399d6e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -26,10 +26,10 @@ export const iconCircle = async (
 
   const topLabel = node.pos === 't';
 
-  const { nodeBorder, mainBkg } = themeVariables;
+  const { nodeBorder } = themeVariables;
   const { stylesMap } = compileStyles(node);
   const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
+  const options = userNodeOverrides(node, { stroke: 'transparent' });
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
@@ -74,7 +74,7 @@ export const iconCircle = async (
         : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY
     })`
   );
-  iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
+  iconElem.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`);
   label.attr(
     'transform',
     `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${
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 8ec7d6ee0..c98c99b6f 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
@@ -30,7 +30,7 @@ export const iconRounded = async (
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { nodeBorder, mainBkg } = themeVariables;
+  const { nodeBorder } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
   const x = -width / 2;
@@ -39,7 +39,7 @@ export const iconRounded = async (
   const labelPadding = node.label ? 8 : 0;
 
   const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
+  const options = userNodeOverrides(node, { stroke: 'transparent' });
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
@@ -82,7 +82,7 @@ export const iconRounded = async (
           : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY
       })`
     );
-    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
+    iconElem.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`);
   }
 
   label.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 df9e790df..3c73d0319 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -29,7 +29,7 @@ export const iconSquare = async (
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { nodeBorder, mainBkg } = themeVariables;
+  const { nodeBorder } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
   const x = -width / 2;
@@ -38,7 +38,7 @@ export const iconSquare = async (
   const labelPadding = node.label ? 8 : 0;
 
   const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
+  const options = userNodeOverrides(node, { stroke: 'transparent' });
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
@@ -81,7 +81,7 @@ export const iconSquare = async (
           : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY
       })`
     );
-    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
+    iconElem.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`);
   }
 
   label.attr(