diff --git a/api/js/etemplate/Et2Button/Et2ButtonIcon.ts b/api/js/etemplate/Et2Button/Et2ButtonIcon.ts
index 482ce12394..15084b8b71 100644
--- a/api/js/etemplate/Et2Button/Et2ButtonIcon.ts
+++ b/api/js/etemplate/Et2Button/Et2ButtonIcon.ts
@@ -28,11 +28,15 @@ export class Et2ButtonIcon extends ButtonMixin(Et2InputWidget(SlIconButton))
 		{
 			this.src = this.egw().image(new_image);
 		}
+		if(new_image && !this.src)
+		{
+			this.name = new_image;
+		}
 	}
 
 	get image()
 	{
-		return this.src;
+		return this.src || this.name;
 	}
 }
 
diff --git a/api/js/etemplate/Styles/shoelace.ts b/api/js/etemplate/Styles/shoelace.ts
index 1c5062539f..aa2850f521 100644
--- a/api/js/etemplate/Styles/shoelace.ts
+++ b/api/js/etemplate/Styles/shoelace.ts
@@ -4,13 +4,21 @@ import {css} from "lit";
 import {registerIconLibrary} from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 import {egw} from "../../jsapi/egw_global";
 
+
 /**
- * This makes sure the built-in icons can be found
+ * Here is the common overrides and customisations for Shoelace
  */
-registerIconLibrary('default', {
+
+
+/**
+ * Register egw images as an icon library
+ * @example <sl-icon library="egw" name="infolog/navbar"/>
+ * @example <sl-icon library="egw" name="5_day_view"/>
+ */
+registerIconLibrary('egw', {
 	resolver: name =>
 	{
-		return typeof egw !== "undefined" ? `${egw.webserverUrl}/node_modules/@shoelace-style/shoelace/dist/assets/icons/${name}.svg` : ''
+		return typeof egw !== "undefined" ? (egw.image(name) || '') : ''
 	},
 });