From bfe50a0be4bad4a8a735273d0bb4092b649894f6 Mon Sep 17 00:00:00 2001
From: Steffen van den Driest <steffen.van.den.driest@alliander.com>
Date: Thu, 4 Apr 2024 13:51:44 +0200
Subject: [PATCH 1/2] feat: add missing editor icons

Signed-off-by: Steffen van den Driest <steffen.van.den.driest@alliander.com>
---
 packages/open-scd/src/icons/icons.ts          | 195 ++++++++++++------
 .../src/editors/substation/bay-editor.ts      |   7 +
 .../src/editors/substation/line-editor.ts     |   4 +
 .../src/editors/substation/process-editor.ts  |   4 +
 .../editors/substation/substation-editor.ts   |   5 +
 .../substation/transformer-winding-editor.ts  |   4 +
 .../substation/voltage-level-editor.ts        |   4 +
 .../__snapshots__/bay-editor.test.snap.js     |  30 +++
 .../__snapshots__/line-editor.test.snap.js    |  15 ++
 .../__snapshots__/process-editor.test.snap.js |  20 ++
 .../substation-editor.test.snap.js            |  25 +++
 .../transformer-winding-editor.test.snap.js   |  15 ++
 .../voltage-level-editor.test.snap.js         |  30 +++
 13 files changed, 294 insertions(+), 64 deletions(-)

diff --git a/packages/open-scd/src/icons/icons.ts b/packages/open-scd/src/icons/icons.ts
index f89b562263..90f9a49515 100644
--- a/packages/open-scd/src/icons/icons.ts
+++ b/packages/open-scd/src/icons/icons.ts
@@ -236,86 +236,64 @@ export const zeroLineIcon = html`<svg
 </svg>`;
 
 export const voltageLevelIcon = html`<svg
+  id="Laag_1"
+  data-name="Laag 1"
   xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 25 25"
+  viewBox="0 0 24 24"
 >
+  <defs>
+    <style>
+      .cls-1 {
+        fill: currentColor;
+      }
+
+      .cls-1,
+      .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: currentColor;
+        opacity: 0;
+      }
+    </style>
+  </defs>
   <path
-    d="M 4 4 L 12.5 21 L 21 4"
-    fill="transparent"
-    stroke="currentColor"
-    stroke-width="3"
-    stroke-linejoin="round"
-    stroke-linecap="round"
+    class="cls-1"
+    d="M11.13,20.06L3.63,6.93c-.27-.48-.11-1.09.37-1.36h0c.48-.27,1.09-.11,1.36.37l6.64,11.61,6.64-11.61c.27-.48.88-.65,1.36-.37h0c.48.27.65.88.37,1.36l-7.5,13.13c-.38.67-1.35.67-1.74,0Z"
   />
+  <rect class="cls-2" width="24" height="24" />
 </svg>`;
 
 export const bayIcon = html`<svg
+  id="Laag_1"
+  data-name="Laag 1"
   xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 25 25"
+  viewBox="0 0 24 24"
 >
+  <defs>
+    <style>
+      .cls-1 {
+        fill: currentColor;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
   <path
-    d="M 3 2 L 22 2"
-    fill="transparent"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linejoin="round"
-    stroke-linecap="round"
-  />
-  <path
-    d="M 3 5 L 22 5"
-    fill="transparent"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linejoin="round"
-    stroke-linecap="round"
-  />
-  <path
-    d="M 7 2 L 7 7.5"
-    fill="transparent"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linejoin="round"
-    stroke-linecap="round"
-  />
-  <path
-    d="M 18 5 L 18 7.5"
-    fill="transparent"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linejoin="round"
-    stroke-linecap="round"
-  />
-  <path
-    d="M 5.5 8.5 L 7 11 L 7 13 L 18 13 L 18 11 L 16.5 8.5"
-    fill="transparent"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linejoin="round"
-    stroke-linecap="round"
+    class="cls-1"
+    d="M7.75,8c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.5h-1.25c0,.84.52,1.55,1.25,1.85v8.65h1.5v-8.65c.73-.3,1.25-1.01,1.25-1.85h-1.25v-1.5Z"
   />
   <path
-    d="M 12.5 13 L 12.5 15"
-    fill="transparent"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linejoin="round"
-    stroke-linecap="round"
+    class="cls-1"
+    d="M12.75,8c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.5h-1.25c0,.84.52,1.55,1.25,1.85v8.65h1.5v-8.65c.73-.3,1.25-1.01,1.25-1.85h-1.25v-1.5Z"
   />
   <path
-    d="M 11 16 L 12.5 18.5 L 12.5 23"
-    fill="transparent"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linejoin="round"
-    stroke-linecap="round"
+    class="cls-1"
+    d="M17.75,8c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.5h-1.25c0,.84.52,1.55,1.25,1.85v8.65h1.5v-8.65c.73-.3,1.25-1.01,1.25-1.85h-1.25v-1.5Z"
   />
   <path
-    d="M 10.5 21 L 12.5 23 L 14.5 21"
-    fill="transparent"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linejoin="round"
-    stroke-linecap="round"
+    class="cls-1"
+    d="M20,4H4c-1.1,0-2,.9-2,2v4c0,1.1.9,2,2,2v-6h16v6c1.1,0,2-.9,2-2v-4c0-1.1-.9-2-2-2Z"
   />
 </svg>`;
 
@@ -684,3 +662,92 @@ export const sizableSmvIcon = svg`
 export const sizableGooseIcon = svg`<svg viewBox="0 0 24 24">
 <path fill="currentColor" d="M11,7H15V9H11V15H13V11H15V15A2,2 0 0,1 13,17H11A2,2 0 0,1 9,15V9A2,2 0 0,1 11,7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
 </svg>`;
+
+export const substationIcon = svg`<svg id="Laag_1" data-name="Laag 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<defs>
+  <style>
+    .cls-1 {
+      fill: currentColor;
+    }
+
+    .cls-1, .cls-2 {
+      stroke-width: 0px;
+    }
+
+    .cls-2 {
+      fill: currentColor;
+      opacity: 0;
+    }
+  </style>
+</defs>
+<g>
+  <path class="cls-1" d="M19.3,7.94l-6-5.14c-.75-.64-1.85-.65-2.6,0l-6,5.14c-.44.38-.7.93-.7,1.52v9.54c0,1.1.9,2,2,2h12c1.1,0,2-.9,2-2v-9.54c0-.58-.25-1.14-.7-1.52ZM18,19H6v-9.54l6-5.14,6,5.14v9.54Z"/>
+  <path class="cls-1" d="M11.57,7.74l-3,5c-.09.15-.09.35,0,.5.09.16.26.25.44.25h2v3.5c0,.22.15.42.37.48.04.01.09.02.13.02.17,0,.34-.09.43-.24l3-5c.09-.15.09-.35,0-.5-.09-.16-.26-.25-.44-.25h-2v-3.5c0-.22-.15-.42-.37-.48-.22-.06-.45.03-.56.22Z"/>
+</g>
+<rect class="cls-2" y="0" width="24" height="24"/>
+</svg>`;
+export const lineIcon = svg`<svg id="Laag_1" data-name="Laag 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<defs>
+  <style>
+    .cls-1 {
+      fill: currentColor;
+    }
+
+    .cls-1, .cls-2 {
+      stroke-width: 0px;
+    }
+
+    .cls-2 {
+      fill: currentColor;
+      opacity: 0;
+    }
+  </style>
+</defs>
+<path class="cls-1" d="M14.39,11.93l-1.39.58v-1.84l2.15-.89c.51-.21.75-.8.54-1.31-.21-.51-.8-.75-1.31-.54l-1.39.58V3c0-.55-.45-1-1-1s-1,.45-1,1v6.33l-2.15.89c-.51.21-.75.8-.54,1.31.21.51.8.75,1.31.54l1.39-.58v1.84l-2.15.89c-.51.21-.75.8-.54,1.31.21.51.8.75,1.31.54l1.39-.58v5.5c0,.55.45,1,1,1s1-.45,1-1v-6.33l2.15-.89c.51-.21.75-.8.54-1.31-.21-.51-.8-.75-1.31-.54Z"/>
+<rect class="cls-2" width="24" height="24"/>
+</svg>`;
+export const processIcon = svg`<svg id="Laag_1" data-name="Laag 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<defs>
+  <style>
+    .cls-1 {
+      fill: currentColor;
+    }
+
+    .cls-1, .cls-2 {
+      stroke-width: 0px;
+    }
+
+    .cls-2 {
+      fill: currentColor;
+      opacity: 0;
+    }
+  </style>
+</defs>
+<path class="cls-1" d="M18.71,15.29c-.39-.39-1.02-.39-1.41,0s-.39,1.02,0,1.41l.29.29h-5.59c0-1.1-.9-2-2-2h-2c-1.01,0-1.84.76-1.97,1.74-.61-.34-1.03-.99-1.03-1.74,0-1.1.9-2,2-2h5c0,1.1.9,2,2,2h2c1.1,0,2-.9,2-2v-.14c1.72-.45,3-2,3-3.86,0-2.21-1.79-4-4-4h-5c0-1.1-.9-2-2-2h-2c-1.1,0-2,.9-2,2h-2c-.55,0-1,.45-1,1s.45,1,1,1h2c0,1.1.9,2,2,2h2c1.1,0,2-.9,2-2h5c1.1,0,2,.9,2,2,0,.75-.42,1.39-1.03,1.74-.13-.98-.96-1.74-1.97-1.74h-2c-1.1,0-2,.9-2,2h-5c-2.21,0-4,1.79-4,4,0,1.86,1.28,3.41,3,3.86v.14c0,1.1.9,2,2,2h2c1.1,0,2-.9,2-2h5.59l-.29.29c-.39.39-.39,1.02,0,1.41.2.2.45.29.71.29s.51-.1.71-.29l2-2c.39-.39.39-1.02,0-1.41l-2-2ZM8,7v-2h2v2s-2,0-2,0ZM14,11h2v2s-2,0-2,0v-2ZM8,19v-2h2v2s-2,0-2,0Z"/>
+<rect class="cls-2" y="0" width="24" height="24"/>
+</svg>`;
+
+export const transformerWindingIcon = svg`<svg id="Laag_1" data-name="Laag 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<defs>
+  <style>
+    .cls-1 {
+      fill: currentColor;
+    }
+
+    .cls-1, .cls-2 {
+      stroke-width: 0px;
+    }
+
+    .cls-2 {
+      fill: currentColor;
+      opacity: 0;
+    }
+  </style>
+</defs>
+<g>
+  <path class="cls-1" d="M19,20h-2c-1.21,0-2.18-1.09-1.97-2.34.16-.98,1.09-1.66,2.08-1.66h-.11c.55,0,1-.45,1-1s-.42-.96-.95-.99c.04,0,.08-.01.12-.01h-.17c-1.21,0-2.18-1.09-1.97-2.34.16-.98,1.09-1.66,2.08-1.66h-.11c.55,0,1-.45,1-1s-.42-.96-.95-.99c.04,0,.08-.01.12-.01h-.17c-1.21,0-2.18-1.09-1.97-2.34.16-.98,1.09-1.66,2.08-1.66h1.89c.55,0,1-.45,1-1s-.45-1-1-1h-1.83c-2.09,0-3.95,1.53-4.15,3.61-.13,1.37.44,2.59,1.38,3.41-.76.64-1.28,1.55-1.38,2.59-.13,1.37.44,2.59,1.38,3.41-.76.64-1.28,1.55-1.38,2.59-.23,2.39,1.64,4.39,3.98,4.39h2c.55,0,1-.45,1-1s-.45-1-1-1Z"/>
+  <path class="cls-1" d="M10.98,6.39c.23-2.39-1.64-4.39-3.98-4.39h-2c-.55,0-1,.45-1,1s.45,1,1,1h2c1.21,0,2.18,1.09,1.97,2.34-.16.98-1.09,1.66-2.08,1.66h.11c-.55,0-1,.45-1,1s.42.96.95.99c-.04,0-.08.01-.12.01h.17c1.21,0,2.18,1.09,1.97,2.34-.16.98-1.09,1.66-2.08,1.66h.11c-.55,0-1,.45-1,1,0,.28.11.53.29.71.17.17.4.27.65.28h0s.03.01.05.01c1.21,0,2.18,1.09,1.97,2.34-.16.98-1.09,1.66-2.08,1.66h-1.89c-.55,0-1,.45-1,1s.45,1,1,1h1.83c2.09,0,3.95-1.53,4.15-3.61.13-1.37-.44-2.59-1.38-3.41.76-.64,1.28-1.55,1.38-2.59.13-1.37-.44-2.59-1.38-3.41.76-.64,1.28-1.55,1.38-2.59Z"/>
+  <path class="cls-1" d="M6.83,16h.17s-.03,0-.05-.01c-.04,0-.08.01-.12.01Z"/>
+</g>
+<rect class="cls-2" width="24" height="24"/>
+</svg>`;
diff --git a/packages/plugins/src/editors/substation/bay-editor.ts b/packages/plugins/src/editors/substation/bay-editor.ts
index ed96c9c9bf..a455060c88 100644
--- a/packages/plugins/src/editors/substation/bay-editor.ts
+++ b/packages/plugins/src/editors/substation/bay-editor.ts
@@ -31,6 +31,10 @@ import {
   SCLTag,
   tags,
 } from '@openscd/open-scd/src/foundation.js';
+import {
+  bayIcon,
+  voltageLevelIcon,
+} from '@openscd/open-scd/src/icons/icons.js';
 import { emptyWizard, wizards } from '../../wizards/wizard-library.js';
 import {
   cloneSubstationElement,
@@ -185,6 +189,9 @@ export class BayEditor extends LitElement {
 
   render(): TemplateResult {
     return html`${this.renderRedirectUI()}<action-pane label="${this.header}">
+        <mwc-icon slot="icon" style="width:24px;height:24px"
+          >${bayIcon}</mwc-icon
+        >
         <abbr slot="action" title="${get('lnode.tooltip')}">
           <mwc-icon-button
             icon="account_tree"
diff --git a/packages/plugins/src/editors/substation/line-editor.ts b/packages/plugins/src/editors/substation/line-editor.ts
index 44541f00a5..191283161e 100644
--- a/packages/plugins/src/editors/substation/line-editor.ts
+++ b/packages/plugins/src/editors/substation/line-editor.ts
@@ -23,6 +23,7 @@ import './function-editor.js';
 import './general-equipment-editor.js';
 import './l-node-editor.js';
 
+import { lineIcon } from '@openscd/open-scd/src/icons/icons.js';
 import { styles } from './foundation.js';
 import {
   getChildElementsByTagName,
@@ -170,6 +171,9 @@ export class LineEditor extends LitElement {
   }
   render(): TemplateResult {
     return html`<action-pane label=${this.header}>
+      <mwc-icon slot="icon" style="width:24px;height:24px"
+        >${lineIcon}</mwc-icon
+      >
       <abbr slot="action" title="${get('edit')}">
         <mwc-icon-button
           icon="edit"
diff --git a/packages/plugins/src/editors/substation/process-editor.ts b/packages/plugins/src/editors/substation/process-editor.ts
index b4d8efdb3f..4f27aa4083 100644
--- a/packages/plugins/src/editors/substation/process-editor.ts
+++ b/packages/plugins/src/editors/substation/process-editor.ts
@@ -27,6 +27,7 @@ import './process-editor.js';
 import './substation-editor.js';
 import './process-editor.js';
 
+import { processIcon } from '@openscd/open-scd/src/icons/icons.js';
 import { styles } from './foundation.js';
 import {
   getChildElementsByTagName,
@@ -214,6 +215,9 @@ export class ProcessEditor extends LitElement {
 
   render(): TemplateResult {
     return html`<action-pane label=${this.header}>
+      <mwc-icon slot="icon" style="width:24px;height:24px"
+        >${processIcon}</mwc-icon
+      >
       <abbr slot="action" title="${get('edit')}">
         <mwc-icon-button
           icon="edit"
diff --git a/packages/plugins/src/editors/substation/substation-editor.ts b/packages/plugins/src/editors/substation/substation-editor.ts
index 562990e3ec..e5e60c8864 100644
--- a/packages/plugins/src/editors/substation/substation-editor.ts
+++ b/packages/plugins/src/editors/substation/substation-editor.ts
@@ -12,6 +12,7 @@ import { classMap } from 'lit-html/directives/class-map';
 import { get } from 'lit-translate';
 
 import '@material/mwc-icon-button';
+import '@material/mwc-icon';
 import { Menu } from '@material/mwc-menu';
 import { IconButton } from '@material/mwc-icon-button';
 import { ListItem } from '@material/mwc-list/mwc-list-item';
@@ -21,6 +22,7 @@ import './ied-editor.js';
 import './powertransformer-editor.js';
 import './voltage-level-editor.js';
 import './general-equipment-editor.js';
+import { substationIcon } from '@openscd/open-scd/src/icons/icons.js';
 import {
   getChildElementsByTagName,
   newActionEvent,
@@ -212,6 +214,9 @@ export class SubstationEditor extends LitElement {
 
   render(): TemplateResult {
     return html`${this.renderRedirectUI()}<action-pane label="${this.header}">
+        <mwc-icon slot="icon" style="width:24px;height:24px"
+          >${substationIcon}</mwc-icon
+        >
         <abbr slot="action" title="${get('lnode.tooltip')}">
           <mwc-icon-button
             icon="account_tree"
diff --git a/packages/plugins/src/editors/substation/transformer-winding-editor.ts b/packages/plugins/src/editors/substation/transformer-winding-editor.ts
index 8f53af3248..f20f670c30 100644
--- a/packages/plugins/src/editors/substation/transformer-winding-editor.ts
+++ b/packages/plugins/src/editors/substation/transformer-winding-editor.ts
@@ -24,6 +24,7 @@ import './eq-function-editor.js';
 import './l-node-editor.js';
 import './tapchanger-editor.js';
 
+import { transformerWindingIcon } from '@openscd/open-scd/src/icons/icons.js';
 import { styles } from './foundation.js';
 import {
   getChildElementsByTagName,
@@ -165,6 +166,9 @@ export class TransformerWindingEditor extends LitElement {
 
   render(): TemplateResult {
     return html`<action-pane label="${this.label}">
+      <mwc-icon slot="icon" style="width:24px;height:24px"
+        >${transformerWindingIcon}</mwc-icon
+      >
       <abbr slot="action" title="${get('edit')}">
         <mwc-icon-button
           icon="edit"
diff --git a/packages/plugins/src/editors/substation/voltage-level-editor.ts b/packages/plugins/src/editors/substation/voltage-level-editor.ts
index 5f0cbf98f3..24a3af5d76 100644
--- a/packages/plugins/src/editors/substation/voltage-level-editor.ts
+++ b/packages/plugins/src/editors/substation/voltage-level-editor.ts
@@ -37,6 +37,7 @@ import {
   tags,
 } from '@openscd/open-scd/src/foundation.js';
 
+import { voltageLevelIcon } from '@openscd/open-scd/src/icons/icons.js';
 import { SubstationEditor } from './substation-editor.js';
 import { emptyWizard, wizards } from '../../wizards/wizard-library.js';
 import { Dialog } from '@material/mwc-dialog';
@@ -222,6 +223,9 @@ export class VoltageLevelEditor extends LitElement {
 
   render(): TemplateResult {
     return html`${this.renderRedirectUI()}<action-pane label="${this.header}">
+        <mwc-icon slot="icon" style="width:24px;height:24px"
+          >${voltageLevelIcon}</mwc-icon
+        >
         <abbr slot="action" title="${get('lnode.tooltip')}">
           <mwc-icon-button
             icon="account_tree"
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js
index 116cb42d08..63a7e0cc74 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js
@@ -6,6 +6,11 @@ snapshots["bay-editor looks like the latest snapshot"] =
   label="COUPLING_BAY - Bay"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -130,6 +135,11 @@ snapshots["bay-editor with readonly property looks like the latest snapshot"] =
   label="COUPLING_BAY - Bay"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -254,6 +264,11 @@ snapshots["bay-editor with function filter deactivated looks like the latest sna
   label="COUPLING_BAY - Bay"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -382,6 +397,11 @@ snapshots["bay-editor with existing LNode children looks like the latest snapsho
   label="Q01 - Bay with LNode"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -504,6 +524,11 @@ snapshots["bay-editor with general-equipment children with showfunctions false l
   label="Q02 "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -624,6 +649,11 @@ snapshots["bay-editor with general-equipment children with showfunctions true lo
   label="Q02 "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/line-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/line-editor.test.snap.js
index 1df347050a..b69604b259 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/line-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/line-editor.test.snap.js
@@ -6,6 +6,11 @@ snapshots["web component rendering Line element rendering LNode and Function chi
   label="Berlin "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[edit]"
@@ -94,6 +99,11 @@ snapshots["web component rendering Line element rendering ConductingEquipment lo
   label="Berlin "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[edit]"
@@ -182,6 +192,11 @@ snapshots["web component rendering Line element rendering GeneralEquipment looks
   label="Munich "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[edit]"
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/process-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/process-editor.test.snap.js
index d53d8c5cc2..2748e7e861 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/process-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/process-editor.test.snap.js
@@ -6,6 +6,11 @@ snapshots["web component rendering Process element rendering LNode, GeneralEquip
   label="ProcessGenConduct "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[edit]"
@@ -129,6 +134,11 @@ snapshots["web component rendering Process element hides LNode and Function chil
   label="ProcessGenConduct "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[edit]"
@@ -246,6 +256,11 @@ snapshots["web component rendering Process element rendering Substation and Proc
   label="ProcProcSubAA1 "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[edit]"
@@ -363,6 +378,11 @@ snapshots["web component rendering Process element rendering a Line child looks
   label="ProcessLine "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[edit]"
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/substation-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/substation-editor.test.snap.js
index 9142f021b1..fb5f0fb12d 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/substation-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/substation-editor.test.snap.js
@@ -6,6 +6,11 @@ snapshots["substation-editor looks like the latest snapshot"] =
   label="AA1 - Substation"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -122,6 +127,11 @@ snapshots["substation-editor with readonly property looks like the latest snapsh
   label="AA1 - Substation"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -238,6 +248,11 @@ snapshots["substation-editor with function filter deactivated looks like the lat
   label="AA1 - Substation"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -368,6 +383,11 @@ snapshots["substation-editor with general-equipment children with showfunctions
   label="AA1 "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -488,6 +508,11 @@ snapshots["substation-editor with general-equipment children with showfunctions
   label="AA1 "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js
index 806ee26980..d0426b4061 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js
@@ -6,6 +6,11 @@ snapshots["transformer-winding-editor with children when EqFunction elements are
   label="some"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[edit]"
@@ -92,6 +97,11 @@ snapshots["transformer-winding-editor with children when hiding EqFunction eleme
   label="some"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[edit]"
@@ -176,6 +186,11 @@ snapshots["transformer-winding-editor without children looks like the latest sna
   label="empty"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[edit]"
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/voltage-level-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/voltage-level-editor.test.snap.js
index ebb1d16f3b..68182e663a 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/voltage-level-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/voltage-level-editor.test.snap.js
@@ -7,6 +7,11 @@ snapshots["voltage-level-editor looks like the latest snapshot"] =
     (110.0 kV)"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -126,6 +131,11 @@ snapshots["voltage-level-editor with readonly property looks like the latest sna
     (110.0 kV)"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -245,6 +255,11 @@ snapshots["voltage-level-editor with function filter deactivated looks like the
     (110.0 kV)"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -370,6 +385,11 @@ snapshots["voltage-level-editor with function filter deactivated and existing LN
     "
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -493,6 +513,11 @@ snapshots["voltage-level-editor with general-equipment children with showfunctio
     (110 kV)"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"
@@ -620,6 +645,11 @@ snapshots["voltage-level-editor with general-equipment children with showfunctio
     (110 kV)"
   tabindex="0"
 >
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
   <abbr
     slot="action"
     title="[lnode.tooltip]"

From 28875b7b176915685feecf337b19eb5f266b4a18 Mon Sep 17 00:00:00 2001
From: Steffen van den Driest <steffen.van.den.driest@alliander.com>
Date: Thu, 4 Apr 2024 16:46:15 +0200
Subject: [PATCH 2/2] chore: removed inline styles

Signed-off-by: Steffen van den Driest <steffen.van.den.driest@alliander.com>
---
 .../plugins/src/editors/substation/bay-editor.ts     |  2 +-
 .../substation/conducting-equipment-editor.ts        |  2 +-
 .../plugins/src/editors/substation/foundation.ts     |  5 +++++
 .../plugins/src/editors/substation/line-editor.ts    |  2 +-
 .../editors/substation/powertransformer-editor.ts    |  2 +-
 .../plugins/src/editors/substation/process-editor.ts |  2 +-
 .../src/editors/substation/substation-editor.ts      |  2 +-
 .../editors/substation/transformer-winding-editor.ts |  2 +-
 .../src/editors/substation/voltage-level-editor.ts   |  2 +-
 .../substation/__snapshots__/bay-editor.test.snap.js | 12 ++++++------
 .../conducting-equipment-editor.test.snap.js         |  8 ++++----
 .../__snapshots__/line-editor.test.snap.js           |  6 +++---
 .../powertransformer-editor.test.snap.js             |  8 ++++----
 .../__snapshots__/process-editor.test.snap.js        |  8 ++++----
 .../__snapshots__/substation-editor.test.snap.js     | 10 +++++-----
 .../transformer-winding-editor.test.snap.js          |  6 +++---
 .../__snapshots__/voltage-level-editor.test.snap.js  | 12 ++++++------
 17 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/packages/plugins/src/editors/substation/bay-editor.ts b/packages/plugins/src/editors/substation/bay-editor.ts
index a455060c88..cd00e79a35 100644
--- a/packages/plugins/src/editors/substation/bay-editor.ts
+++ b/packages/plugins/src/editors/substation/bay-editor.ts
@@ -189,7 +189,7 @@ export class BayEditor extends LitElement {
 
   render(): TemplateResult {
     return html`${this.renderRedirectUI()}<action-pane label="${this.header}">
-        <mwc-icon slot="icon" style="width:24px;height:24px"
+        <mwc-icon class="substation-editor-icon" slot="icon"
           >${bayIcon}</mwc-icon
         >
         <abbr slot="action" title="${get('lnode.tooltip')}">
diff --git a/packages/plugins/src/editors/substation/conducting-equipment-editor.ts b/packages/plugins/src/editors/substation/conducting-equipment-editor.ts
index 09b2c97024..7ddc082ccd 100644
--- a/packages/plugins/src/editors/substation/conducting-equipment-editor.ts
+++ b/packages/plugins/src/editors/substation/conducting-equipment-editor.ts
@@ -158,7 +158,7 @@ export class ConductingEquipmentEditor extends LitElement {
   }
 
   renderContentPane(): TemplateResult {
-    return html`<mwc-icon slot="icon" style="width:24px;height:24px"
+    return html`<mwc-icon class="substation-editor-icon" slot="icon"
         >${getIcon(this.element)}</mwc-icon
       >
       <abbr slot="action" title="${get('lnode.tooltip')}">
diff --git a/packages/plugins/src/editors/substation/foundation.ts b/packages/plugins/src/editors/substation/foundation.ts
index 243646d716..11ff46ab61 100644
--- a/packages/plugins/src/editors/substation/foundation.ts
+++ b/packages/plugins/src/editors/substation/foundation.ts
@@ -679,4 +679,9 @@ export const styles = css`
   general-equipment-editor[showfunctions] {
     margin: 4px 8px 16px;
   }
+
+  .substation-editor-icon {
+    width: 24px;
+    height: 24px;
+  }
 `;
diff --git a/packages/plugins/src/editors/substation/line-editor.ts b/packages/plugins/src/editors/substation/line-editor.ts
index 191283161e..b5c899fda9 100644
--- a/packages/plugins/src/editors/substation/line-editor.ts
+++ b/packages/plugins/src/editors/substation/line-editor.ts
@@ -171,7 +171,7 @@ export class LineEditor extends LitElement {
   }
   render(): TemplateResult {
     return html`<action-pane label=${this.header}>
-      <mwc-icon slot="icon" style="width:24px;height:24px"
+      <mwc-icon class="substation-editor-icon" slot="icon"
         >${lineIcon}</mwc-icon
       >
       <abbr slot="action" title="${get('edit')}">
diff --git a/packages/plugins/src/editors/substation/powertransformer-editor.ts b/packages/plugins/src/editors/substation/powertransformer-editor.ts
index d8c81c1780..5ba5288890 100644
--- a/packages/plugins/src/editors/substation/powertransformer-editor.ts
+++ b/packages/plugins/src/editors/substation/powertransformer-editor.ts
@@ -161,7 +161,7 @@ export class PowerTransformerEditor extends LitElement {
   }
 
   renderContentPane(): TemplateResult {
-    return html`<mwc-icon slot="icon" style="width:24px;height:24px"
+    return html`<mwc-icon class="substation-editor-icon" slot="icon"
         >${powerTransformerTwoWindingIcon}</mwc-icon
       >
       <abbr slot="action" title="${get('lnode.tooltip')}">
diff --git a/packages/plugins/src/editors/substation/process-editor.ts b/packages/plugins/src/editors/substation/process-editor.ts
index 4f27aa4083..13cf43bc05 100644
--- a/packages/plugins/src/editors/substation/process-editor.ts
+++ b/packages/plugins/src/editors/substation/process-editor.ts
@@ -215,7 +215,7 @@ export class ProcessEditor extends LitElement {
 
   render(): TemplateResult {
     return html`<action-pane label=${this.header}>
-      <mwc-icon slot="icon" style="width:24px;height:24px"
+      <mwc-icon class="substation-editor-icon" slot="icon"
         >${processIcon}</mwc-icon
       >
       <abbr slot="action" title="${get('edit')}">
diff --git a/packages/plugins/src/editors/substation/substation-editor.ts b/packages/plugins/src/editors/substation/substation-editor.ts
index e5e60c8864..fde82503f4 100644
--- a/packages/plugins/src/editors/substation/substation-editor.ts
+++ b/packages/plugins/src/editors/substation/substation-editor.ts
@@ -214,7 +214,7 @@ export class SubstationEditor extends LitElement {
 
   render(): TemplateResult {
     return html`${this.renderRedirectUI()}<action-pane label="${this.header}">
-        <mwc-icon slot="icon" style="width:24px;height:24px"
+        <mwc-icon class="substation-editor-icon" slot="icon"
           >${substationIcon}</mwc-icon
         >
         <abbr slot="action" title="${get('lnode.tooltip')}">
diff --git a/packages/plugins/src/editors/substation/transformer-winding-editor.ts b/packages/plugins/src/editors/substation/transformer-winding-editor.ts
index f20f670c30..8c6b1709e0 100644
--- a/packages/plugins/src/editors/substation/transformer-winding-editor.ts
+++ b/packages/plugins/src/editors/substation/transformer-winding-editor.ts
@@ -166,7 +166,7 @@ export class TransformerWindingEditor extends LitElement {
 
   render(): TemplateResult {
     return html`<action-pane label="${this.label}">
-      <mwc-icon slot="icon" style="width:24px;height:24px"
+      <mwc-icon class="substation-editor-icon" slot="icon"
         >${transformerWindingIcon}</mwc-icon
       >
       <abbr slot="action" title="${get('edit')}">
diff --git a/packages/plugins/src/editors/substation/voltage-level-editor.ts b/packages/plugins/src/editors/substation/voltage-level-editor.ts
index 24a3af5d76..37938b11ae 100644
--- a/packages/plugins/src/editors/substation/voltage-level-editor.ts
+++ b/packages/plugins/src/editors/substation/voltage-level-editor.ts
@@ -223,7 +223,7 @@ export class VoltageLevelEditor extends LitElement {
 
   render(): TemplateResult {
     return html`${this.renderRedirectUI()}<action-pane label="${this.header}">
-        <mwc-icon slot="icon" style="width:24px;height:24px"
+        <mwc-icon class="substation-editor-icon" slot="icon"
           >${voltageLevelIcon}</mwc-icon
         >
         <abbr slot="action" title="${get('lnode.tooltip')}">
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js
index 63a7e0cc74..ab04c80e2a 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js
@@ -7,8 +7,8 @@ snapshots["bay-editor looks like the latest snapshot"] =
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -136,8 +136,8 @@ snapshots["bay-editor with readonly property looks like the latest snapshot"] =
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -265,8 +265,8 @@ snapshots["bay-editor with function filter deactivated looks like the latest sna
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -398,8 +398,8 @@ snapshots["bay-editor with existing LNode children looks like the latest snapsho
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -525,8 +525,8 @@ snapshots["bay-editor with general-equipment children with showfunctions false l
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -650,8 +650,8 @@ snapshots["bay-editor with general-equipment children with showfunctions true lo
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js
index cb81e2442d..eba7a92071 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js
@@ -42,8 +42,8 @@ snapshots["conducting-equipment-editor rendered as action pane looks like the la
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -146,8 +146,8 @@ snapshots["conducting-equipment-editor rendered as action pane with EqFunction c
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -252,8 +252,8 @@ snapshots["conducting-equipment-editor rendered as action pane with LNode childr
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -364,8 +364,8 @@ snapshots["conducting-equipment-editor rendered as action pane with SubEquipment
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/line-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/line-editor.test.snap.js
index b69604b259..6cbcadf938 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/line-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/line-editor.test.snap.js
@@ -7,8 +7,8 @@ snapshots["web component rendering Line element rendering LNode and Function chi
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -100,8 +100,8 @@ snapshots["web component rendering Line element rendering ConductingEquipment lo
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -193,8 +193,8 @@ snapshots["web component rendering Line element rendering GeneralEquipment looks
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js
index 8e825424fe..99639980d3 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js
@@ -43,8 +43,8 @@ snapshots["powertransformer-editor rendered as action pane looks like the latest
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -164,8 +164,8 @@ snapshots["powertransformer-editor rendered as action pane with EqFunction child
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -281,8 +281,8 @@ snapshots["powertransformer-editor rendered as action pane with LNode children l
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -400,8 +400,8 @@ snapshots["powertransformer-editor rendered as action pane with SubEquipment chi
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/process-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/process-editor.test.snap.js
index 2748e7e861..19f94cb371 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/process-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/process-editor.test.snap.js
@@ -7,8 +7,8 @@ snapshots["web component rendering Process element rendering LNode, GeneralEquip
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -135,8 +135,8 @@ snapshots["web component rendering Process element hides LNode and Function chil
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -257,8 +257,8 @@ snapshots["web component rendering Process element rendering Substation and Proc
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -379,8 +379,8 @@ snapshots["web component rendering Process element rendering a Line child looks
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/substation-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/substation-editor.test.snap.js
index fb5f0fb12d..47534eb67e 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/substation-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/substation-editor.test.snap.js
@@ -7,8 +7,8 @@ snapshots["substation-editor looks like the latest snapshot"] =
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -128,8 +128,8 @@ snapshots["substation-editor with readonly property looks like the latest snapsh
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -249,8 +249,8 @@ snapshots["substation-editor with function filter deactivated looks like the lat
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -384,8 +384,8 @@ snapshots["substation-editor with general-equipment children with showfunctions
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -509,8 +509,8 @@ snapshots["substation-editor with general-equipment children with showfunctions
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js
index d0426b4061..906e640856 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js
@@ -7,8 +7,8 @@ snapshots["transformer-winding-editor with children when EqFunction elements are
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -98,8 +98,8 @@ snapshots["transformer-winding-editor with children when hiding EqFunction eleme
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -187,8 +187,8 @@ snapshots["transformer-winding-editor without children looks like the latest sna
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
diff --git a/packages/plugins/test/unit/editors/substation/__snapshots__/voltage-level-editor.test.snap.js b/packages/plugins/test/unit/editors/substation/__snapshots__/voltage-level-editor.test.snap.js
index 68182e663a..c575206ee3 100644
--- a/packages/plugins/test/unit/editors/substation/__snapshots__/voltage-level-editor.test.snap.js
+++ b/packages/plugins/test/unit/editors/substation/__snapshots__/voltage-level-editor.test.snap.js
@@ -8,8 +8,8 @@ snapshots["voltage-level-editor looks like the latest snapshot"] =
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -132,8 +132,8 @@ snapshots["voltage-level-editor with readonly property looks like the latest sna
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -256,8 +256,8 @@ snapshots["voltage-level-editor with function filter deactivated looks like the
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -386,8 +386,8 @@ snapshots["voltage-level-editor with function filter deactivated and existing LN
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -514,8 +514,8 @@ snapshots["voltage-level-editor with general-equipment children with showfunctio
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr
@@ -646,8 +646,8 @@ snapshots["voltage-level-editor with general-equipment children with showfunctio
   tabindex="0"
 >
   <mwc-icon
+    class="substation-editor-icon"
     slot="icon"
-    style="width:24px;height:24px"
   >
   </mwc-icon>
   <abbr