Use Lion's SlotMixin to handle button icon instead of managing it ourselves

api/js/etemplate/Et2Button.ts

@@ -11,10 +11,11 @@
 
 import {css, html} from "../../../node_modules/@lion/core/index.js";
 import {LionButton} from "../../../node_modules/@lion/button/index.js";
+import {SlotMixin} from "../../../node_modules/@lion/core/src/SlotMixin.js";
 import {Et2InputWidget} from "./et2_core_inputWidget";
 import {Et2Widget} from "./Et2Widget";
 
-export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
+export class Et2Button extends Et2InputWidget(Et2Widget(SlotMixin(LionButton)))
 {
 	protected _created_icon_node : HTMLImageElement;
 	protected clicked : boolean = false;
@@ -50,6 +51,17 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
 		}
 	}
 
+	get slots()
+	{
+		return {
+			...super.slots,
+			icon: () =>
+			{
+				return document.createElement("img");
+			}
+		}
+	}
+
 	constructor()
 	{
 		super();
@@ -57,10 +69,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
 		// Property default values
 		this.image = '';
 
-		// Create icon Element since BXButton puts it as child, but we put it as attribute
+		// Do not add icon here, no children can be added in constructor
-		this._created_icon_node = document.createElement("img");
-		this._created_icon_node.slot = "icon";
-		// Do not add this._icon here, no children can be added in constructor
 
 		// Define a default click handler
 		// If a different one gets set via attribute, it will be used instead
@@ -78,8 +87,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
 
 		if(this.image)
 		{
-			this._created_icon_node.src = egw.image(this.image);
+			this._iconNode.src = egw.image(this.image);
-			this.appendChild(this._created_icon_node);
 		}
 	}
 
@@ -110,7 +118,10 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
 
 	render()
 	{
-		if(this.readonly) return '';
+		if(this.readonly)
+		{
+			return '';
+		}
 
 		return html`
             <div class="button-content et2_button" id="${this._buttonId}">
@@ -119,6 +130,13 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
             </div> `;
 	}
 
+	get _iconNode() : HTMLImageElement
+	{
+		return <HTMLImageElement>(Array.from(this.children)).find(
+			el => el.slot === "icon",
+		);
+	}
+
 	/**
 	 * Implementation of the et2_IInput interface
 	 */