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 c7ac6acc1..573a40f1d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
@@ -22,23 +22,18 @@ export const icon = async (parent: SVG, node: Node) => {
const iconSize = Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
const width = Math.max(labelWidth, iconSize);
- const height = labelHeight + iconSize + halfPadding * 2;
-
- const points = [
- { x: 0, y: 0 },
- { x: 0, y: height },
- { x: width, y: height },
- { x: width, y: 0 },
- ];
+ const height = labelHeight + iconSize;
+ const dx = bbox.x;
+ const dy = bbox.y;
if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html(
- `${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}`
+ `${await getIconSVG(node.icon, { height: iconSize - 4 * halfPadding, fallbackPrefix: '' })}`
);
iconElem.attr(
'transform',
- `translate(${0}, ${topLabel ? labelHeight - halfPadding : 0 + halfPadding * 2})`
+ `translate(${dx - width / 2 + halfPadding * 2}, ${dy - height / 2 + halfPadding * 2 + (topLabel ? labelHeight : 0)})`
);
}
@@ -52,13 +47,13 @@ export const icon = async (parent: SVG, node: Node) => {
label.attr(
'transform',
- `translate(${width / 2 - labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${(topLabel ? 0 : iconSize) + halfPadding * 2})`
+ `translate(${dx - width / 2 + halfPadding},${dy - height / 2 + iconSize + halfPadding - labelHeight / 2 - (topLabel ? iconSize : 0)})`
);
updateNodeBounds(node, shapeSvg);
node.intersect = function (point) {
log.info('iconSquare intersect', node, point);
- const pos = intersect.polygon(node, points, point);
+ const pos = intersect.rect(node, point);
return pos;
};