icons in top left of containers

d2layouts/d2dagrelayout/layout.go

@@ -115,6 +115,11 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 		if obj.LabelHeight != nil {
 			maxContainerLabelHeight = go2.Max(maxContainerLabelHeight, *obj.LabelHeight+label.PADDING)
 		}
+
+		if obj.Attributes.Icon != nil {
+			iconSize := d2target.GetIconSize(obj.Box, string(label.InsideTopLeft))
+			maxContainerLabelHeight = go2.Max(maxContainerLabelHeight, iconSize+label.PADDING)
+		}
 	}
 
 	maxLabelSize := 0
@@ -219,9 +224,13 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 			}
 		}
 		if obj.Attributes.Icon != nil {
+			if len(obj.ChildrenArray) > 0 {
+				obj.IconPosition = go2.Pointer(string(label.InsideTopLeft))
+			} else {
 				obj.IconPosition = go2.Pointer(string(label.InsideMiddleCenter))
 			}
 		}
+	}
 
 	for i, edge := range g.Edges {
 		val, err := vm.RunString(fmt.Sprintf("JSON.stringify(g.edge(g.edges()[%d]))", i))

d2layouts/d2elklayout/layout.go

@@ -186,6 +186,7 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 		}
 
 		if len(obj.ChildrenArray) > 0 {
+
 			n.LayoutOptions = &elkOpts{
 				ForceNodeModelOrder:          true,
 				Thoroughness:                 8,
@@ -199,6 +200,21 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 					Padding:         opts.Padding,
 				},
 			}
+
+			if n.LayoutOptions.Padding == DefaultOpts.Padding {
+				// Default
+				paddingTop := 50
+				if obj.LabelHeight != nil {
+					paddingTop = go2.Max(paddingTop, *obj.LabelHeight+label.PADDING)
+				}
+				if obj.Attributes.Icon != nil {
+					iconSize := d2target.GetIconSize(obj.Box, string(label.InsideTopLeft))
+					paddingTop = go2.Max(paddingTop, iconSize+label.PADDING)
+				}
+				n.LayoutOptions.Padding = fmt.Sprintf("[top=%d,left=50,bottom=50,right=50]",
+					paddingTop,
+				)
+			}
 		}
 
 		if obj.LabelWidth != nil && obj.LabelHeight != nil {
@@ -310,8 +326,12 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 			}
 		}
 		if obj.Attributes.Icon != nil {
+			if len(obj.ChildrenArray) > 0 {
+				obj.IconPosition = go2.Pointer(string(label.InsideTopLeft))
+			} else {
 				obj.IconPosition = go2.Pointer(string(label.InsideMiddleCenter))
 			}
+		}
 
 		byID[obj.AbsID()] = obj
 	})

d2renderers/d2svg/d2svg.go

@@ -883,7 +883,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		} else {
 			box = s.GetInnerBox()
 		}
-		iconSize := targetShape.GetIconSize(box)
+		iconSize := d2target.GetIconSize(box, targetShape.IconPosition)
 
 		tl := iconPosition.GetPointOnBox(box, label.PADDING, float64(iconSize), float64(iconSize))
 

d2target/d2target.go

@@ -538,8 +538,8 @@ func init() {
 	}
 }
 
-func (s *Shape) GetIconSize(box *geo.Box) int {
+func GetIconSize(box *geo.Box, position string) int {
-	iconPosition := label.Position(s.IconPosition)
+	iconPosition := label.Position(position)
 
 	minDimension := int(math.Min(box.Width, box.Height))
 	halfMinDimension := int(math.Ceil(0.5 * float64(minDimension)))

e2etests/stable_test.go

@@ -895,6 +895,31 @@ b: {
   icon: https://icons.terrastruct.com/essentials/004-picture.svg
 }
 a -> b
+`,
+		},
+		{
+			name: "icon-containers",
+			script: `vpc: VPC 1 10.1.0.0./16 {
+  icon: https://icons.terrastruct.com/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-VPC.svg
+	style: {
+	  stroke: green
+		font-color: green
+	}
+  az: Availability Zone A {
+		style: {
+			stroke: blue
+			font-color: blue
+			stroke-dash: 3
+		}
+		firewall: Firewall Subnet A {
+			icon: https://icons.terrastruct.com/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg
+			style: {
+				stroke: purple
+				font-color: purple
+			}
+		}
+  }
+}
 `,
 		},
 		{

e2etests/testdata/stable/font_sizes_containers_large/elk/board.exp.json

@@ -10,7 +10,7 @@
         "y": 12
       },
       "width": 464,
-      "height": 456,
+      "height": 572,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -48,10 +48,10 @@
       "type": "rectangle",
       "pos": {
         "x": 62,
-        "y": 62
+        "y": 142
       },
       "width": 364,
-      "height": 356,
+      "height": 392,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -89,7 +89,7 @@
       "type": "rectangle",
       "pos": {
         "x": 112,
-        "y": 112
+        "y": 228
       },
       "width": 264,
       "height": 256,
@@ -130,7 +130,7 @@
       "type": "rectangle",
       "pos": {
         "x": 162,
-        "y": 162
+        "y": 278
       },
       "width": 164,
       "height": 156,
@@ -171,7 +171,7 @@
       "type": "rectangle",
       "pos": {
         "x": 212,
-        "y": 212
+        "y": 328
       },
       "width": 64,
       "height": 56,

e2etests/testdata/stable/font_sizes_containers_large/elk/sketch.exp.svg

@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="668" height="660" viewBox="-90 -90 668 660"><style type="text/css">
+width="668" height="776" viewBox="-90 -90 668 776"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -39,8 +39,8 @@ width="668" height="660" viewBox="-90 -90 668 660"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="ninety nine"><g class="shape" ><rect x="12" y="12" width="464" height="456" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="116.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="62" y="62" width="364" height="356" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="131.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="112" y="112" width="264" height="256" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="149.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="162" y="162" width="164" height="156" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="183.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="212" y="212" width="64" height="56" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="244.000000" y="242.500000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><mask id="529754507" maskUnits="userSpaceOnUse" x="-100" y="-100" width="668" height="660">
+]]></script><g id="ninety nine"><g class="shape" ><rect x="12" y="12" width="464" height="572" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="116.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="62" y="142" width="364" height="392" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="211.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="112" y="228" width="264" height="256" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="265.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="162" y="278" width="164" height="156" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="244.000000" y="299.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="212" y="328" width="64" height="56" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="244.000000" y="358.500000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><mask id="3952077561" maskUnits="userSpaceOnUse" x="-100" y="-100" width="668" height="776">
-<rect x="-100" y="-100" width="668" height="660" fill="white"></rect>
+<rect x="-100" y="-100" width="668" height="776" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
 .text {

e2etests/testdata/stable/icon-containers/dagre/board.exp.json

@@ -0,0 +1,152 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "vpc",
+      "type": "rectangle",
+      "pos": {
+        "x": 0,
+        "y": 41
+      },
+      "width": 315,
+      "height": 277,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "green",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": {
+        "Scheme": "https",
+        "Opaque": "",
+        "User": null,
+        "Host": "icons.terrastruct.com",
+        "Path": "/aws/Networking & Content Delivery/Amazon-VPC.svg",
+        "RawPath": "/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-VPC.svg",
+        "ForceQuery": false,
+        "RawQuery": "",
+        "Fragment": "",
+        "RawFragment": ""
+      },
+      "iconPosition": "INSIDE_TOP_LEFT",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "VPC 1 10.1.0.0./16",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "green",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 206,
+      "labelHeight": 36,
+      "labelPosition": "OUTSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "vpc.az",
+      "type": "rectangle",
+      "pos": {
+        "x": 20,
+        "y": 106
+      },
+      "width": 275,
+      "height": 182,
+      "opacity": 1,
+      "strokeDash": 3,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "blue",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Availability Zone A",
+      "fontSize": 24,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "blue",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 185,
+      "labelHeight": 31,
+      "labelPosition": "OUTSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "vpc.az.firewall",
+      "type": "rectangle",
+      "pos": {
+        "x": 60,
+        "y": 138
+      },
+      "width": 195,
+      "height": 118,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "purple",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": {
+        "Scheme": "https",
+        "Opaque": "",
+        "User": null,
+        "Host": "icons.terrastruct.com",
+        "Path": "/aws/Networking & Content Delivery/Amazon-Route-53_Hosted-Zone_light-bg.svg",
+        "RawPath": "/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg",
+        "ForceQuery": false,
+        "RawQuery": "",
+        "Fragment": "",
+        "RawFragment": ""
+      },
+      "iconPosition": "INSIDE_MIDDLE_CENTER",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Firewall Subnet A",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "purple",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 124,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 3
+    }
+  ],
+  "connections": []
+}

e2etests/testdata/stable/icon-containers/elk/board.exp.json

@@ -0,0 +1,152 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "vpc",
+      "type": "rectangle",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 395,
+      "height": 334,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "green",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": {
+        "Scheme": "https",
+        "Opaque": "",
+        "User": null,
+        "Host": "icons.terrastruct.com",
+        "Path": "/aws/Networking & Content Delivery/Amazon-VPC.svg",
+        "RawPath": "/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-VPC.svg",
+        "ForceQuery": false,
+        "RawQuery": "",
+        "Fragment": "",
+        "RawFragment": ""
+      },
+      "iconPosition": "INSIDE_TOP_LEFT",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "VPC 1 10.1.0.0./16",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "green",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 206,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "vpc.az",
+      "type": "rectangle",
+      "pos": {
+        "x": 62,
+        "y": 78
+      },
+      "width": 295,
+      "height": 218,
+      "opacity": 1,
+      "strokeDash": 3,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "blue",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Availability Zone A",
+      "fontSize": 24,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "blue",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 185,
+      "labelHeight": 31,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "vpc.az.firewall",
+      "type": "rectangle",
+      "pos": {
+        "x": 112,
+        "y": 128
+      },
+      "width": 195,
+      "height": 118,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "purple",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": {
+        "Scheme": "https",
+        "Opaque": "",
+        "User": null,
+        "Host": "icons.terrastruct.com",
+        "Path": "/aws/Networking & Content Delivery/Amazon-Route-53_Hosted-Zone_light-bg.svg",
+        "RawPath": "/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg",
+        "ForceQuery": false,
+        "RawQuery": "",
+        "Fragment": "",
+        "RawFragment": ""
+      },
+      "iconPosition": "INSIDE_MIDDLE_CENTER",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Firewall Subnet A",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "purple",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 124,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 3
+    }
+  ],
+  "connections": []
+}

e2etests/testdata/todo/container_icon_label/dagre/board.exp.json

@@ -35,7 +35,7 @@
         "Fragment": "",
         "RawFragment": ""
       },
-      "iconPosition": "INSIDE_MIDDLE_CENTER",
+      "iconPosition": "INSIDE_TOP_LEFT",
       "blend": false,
       "fields": null,
       "methods": null,

e2etests/testdata/todo/container_icon_label/dagre/sketch.exp.svg

@@ -39,7 +39,7 @@ width="377" height="800" viewBox="-102 -100 377 800"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="0" y="43" width="173" height="555" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="54.500000" y="288.500000" width="64" height="64" /><text class="text" x="86.500000" y="30.000000" style="text-anchor:middle;font-size:30px;fill:#0A0F25">Big font</text></g><g id="a.a"><g class="shape" ><rect x="20" y="107" width="133" height="130" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="86.500000" y="95.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="60" y="337" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="375.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="60" y="503" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="541.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="a.a.a"><g class="shape" ><rect x="60" y="139" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="177.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 86.500000 239.500000 C 86.500000 277.500000 86.500000 297.500000 86.500000 333.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#157059367)"/></g><g id="a.(b -&gt; c)[0]"><path d="M 86.500000 405.500000 C 86.500000 443.500000 86.500000 463.500000 86.500000 499.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#157059367)"/></g><mask id="157059367" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="800">
+]]></script><g id="a"><g class="shape" ><rect x="0" y="43" width="173" height="555" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="5.000000" y="48.000000" width="64" height="64" /><text class="text" x="86.500000" y="30.000000" style="text-anchor:middle;font-size:30px;fill:#0A0F25">Big font</text></g><g id="a.a"><g class="shape" ><rect x="20" y="107" width="133" height="130" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="86.500000" y="95.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="60" y="337" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="375.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="60" y="503" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="541.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="a.a.a"><g class="shape" ><rect x="60" y="139" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="177.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 86.500000 239.500000 C 86.500000 277.500000 86.500000 297.500000 86.500000 333.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3313825229)"/></g><g id="a.(b -&gt; c)[0]"><path d="M 86.500000 405.500000 C 86.500000 443.500000 86.500000 463.500000 86.500000 499.500000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3313825229)"/></g><mask id="3313825229" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="800">
 <rect x="-100" y="-100" width="377" height="800" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[

e2etests/testdata/todo/container_icon_label/elk/board.exp.json

@@ -10,7 +10,7 @@
         "y": 12
       },
       "width": 253,
-      "height": 538,
+      "height": 556,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -35,7 +35,7 @@
         "Fragment": "",
         "RawFragment": ""
       },
-      "iconPosition": "INSIDE_MIDDLE_CENTER",
+      "iconPosition": "INSIDE_TOP_LEFT",
       "blend": false,
       "fields": null,
       "methods": null,
@@ -59,7 +59,7 @@
       "type": "rectangle",
       "pos": {
         "x": 62,
-        "y": 62
+        "y": 80
       },
       "width": 153,
       "height": 166,
@@ -100,7 +100,7 @@
       "type": "rectangle",
       "pos": {
         "x": 112,
-        "y": 298
+        "y": 316
       },
       "width": 53,
       "height": 66,
@@ -141,7 +141,7 @@
       "type": "rectangle",
       "pos": {
         "x": 112,
-        "y": 434
+        "y": 452
       },
       "width": 53,
       "height": 66,
@@ -182,7 +182,7 @@
       "type": "rectangle",
       "pos": {
         "x": 112,
-        "y": 112
+        "y": 130
       },
       "width": 53,
       "height": 66,
@@ -247,11 +247,11 @@
       "route": [
         {
           "x": 138.5,
-          "y": 228
+          "y": 246
         },
         {
           "x": 138.5,
-          "y": 298
+          "y": 316
         }
       ],
       "animated": false,
@@ -286,11 +286,11 @@
       "route": [
         {
           "x": 138.5,
-          "y": 364
+          "y": 382
         },
         {
           "x": 138.5,
-          "y": 434
+          "y": 452
         }
       ],
       "animated": false,

e2etests/testdata/todo/container_icon_label/elk/sketch.exp.svg

@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="457" height="742" viewBox="-90 -90 457 742"><style type="text/css">
+width="457" height="760" viewBox="-90 -90 457 760"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -39,8 +39,8 @@ width="457" height="742" viewBox="-90 -90 457 742"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="253" height="538" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="106.500000" y="249.000000" width="64" height="64" /><text class="text" x="138.500000" y="47.000000" style="text-anchor:middle;font-size:30px;fill:#0A0F25">Big font</text></g><g id="a.a"><g class="shape" ><rect x="62" y="62" width="153" height="166" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="138.500000" y="91.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="112" y="298" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="336.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="112" y="434" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="472.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="a.a.a"><g class="shape" ><rect x="112" y="112" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="150.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 138.500000 230.000000 L 138.500000 294.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2269574572)"/></g><g id="a.(b -&gt; c)[0]"><path d="M 138.500000 366.000000 L 138.500000 430.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2269574572)"/></g><mask id="2269574572" maskUnits="userSpaceOnUse" x="-100" y="-100" width="457" height="742">
+]]></script><g id="a"><g class="shape" ><rect x="12" y="12" width="253" height="556" style="fill:#E3E9FD;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="17.000000" y="17.000000" width="64" height="64" /><text class="text" x="138.500000" y="47.000000" style="text-anchor:middle;font-size:30px;fill:#0A0F25">Big font</text></g><g id="a.a"><g class="shape" ><rect x="62" y="80" width="153" height="166" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text" x="138.500000" y="109.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="112" y="316" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="354.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.c"><g class="shape" ><rect x="112" y="452" width="53" height="66" style="fill:#EDF0FD;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="490.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="a.a.a"><g class="shape" ><rect x="112" y="130" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><text class="text-bold" x="138.500000" y="168.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 138.500000 248.000000 L 138.500000 312.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1811009328)"/></g><g id="a.(b -&gt; c)[0]"><path d="M 138.500000 384.000000 L 138.500000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1811009328)"/></g><mask id="1811009328" maskUnits="userSpaceOnUse" x="-100" y="-100" width="457" height="760">
-<rect x="-100" y="-100" width="457" height="742" fill="white"></rect>
+<rect x="-100" y="-100" width="457" height="760" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
 .text {