WIP styling buttons

api/js/etemplate/Et2Button/ButtonStyles.ts

@@ -21,4 +21,11 @@ export const buttonStyles = [
 	:host(:active) {
 		box-shadow: inset 1px 2px 1px rgb(0 0 0 / 50%);
 	}
+	div {
+		flex: 1 1 auto;
+		background-repeat: no-repeat;
+		background-position: left center;
+		background-size: contain;
+		margin: 2px;
+	}
 `];

api/js/etemplate/Et2Button/Et2Button.ts

@@ -59,7 +59,7 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
 			buttonStyles,
 			css`
             :host {
-                padding: 1px 8px;
+                padding: 0;
                 /* These should probably come from somewhere else */
                	max-width: 125px;
             }
@@ -74,6 +74,11 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
             ::slotted([slot="icon"][src='']) {
 				display: none;
 			}
+			.imageOnly {
+				width:20px;
+				height: 20px;
+				background-color: var(--bg_color_5_gray);
+			}
             `,
 		];
 	}
@@ -86,16 +91,6 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
 		}
 	}
 
-	get slots()
-	{
-		return {
-			...super.slots,
-			icon: () =>
-			{
-				return document.createElement("img");
-			}
-		}
-	}
 
 	constructor()
 	{
@@ -195,13 +190,9 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
 		{
 			return '';
 		}
-
-		this._iconNode.src = this._image;
-
 		return html`
-            <div class="button-content et2_button" id="${this._buttonId}">
+           <div class="button-content et2_button ${this._label?'':'imageOnly'}" id="${this._buttonId}" style="background-image: url(${this._image})">
-                <slot name="icon"></slot>
+                 <slot name="label">${this._label}</slot>
-                <slot>${this._label}</slot>
             </div> `;
 	}