ONLY-USE: Fix bug: svg url treated as sprite

docs/pages/resources/changelog.md

@@ -19,6 +19,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Removed error when a missing popup anchor is provided [#1548]
 - Updated `@ctrl/tinycolor` to 4.0.1 [#1542]
 - Updated Bootstrap Icons to 1.11.0
+- Fixed a bug in `<sl-icon>` where we load svg URL via `<use>` if the default icon library was changed to be a sprite.
 
 ## 2.8.0
 

src/components/icon/icon.component.ts

@@ -15,6 +15,11 @@ type SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | t
 let parser: DOMParser;
 const iconCache = new Map<string, Promise<SVGResult>>();
 
+interface IconSource {
+  url?: string;
+  fromLibrary: boolean;
+}
+
 /**
  * @summary Icons are symbols that can be used to represent various options within an application.
  * @documentation https://shoelace.style/components/icon
@@ -104,12 +109,19 @@ export default class SlIcon extends ShoelaceElement {
     unwatchIcon(this);
   }
 
-  private getUrl() {
+  private getUrl(): IconSource {
     const library = getIconLibrary(this.library);
     if (this.name && library) {
-      return library.resolver(this.name);
+      return {
+        url: library.resolver(this.name),
+        fromLibrary: true
+      };
     }
-    return this.src;
+
+    return {
+      url: this.src,
+      fromLibrary: false
+    };
   }
 
   @watch('label')
@@ -129,8 +141,8 @@ export default class SlIcon extends ShoelaceElement {
 
   @watch(['name', 'src', 'library'])
   async setIcon() {
-    const library = getIconLibrary(this.library);
-    const url = this.getUrl();
+    const { url, fromLibrary } = this.getUrl();
+    const library = fromLibrary ? getIconLibrary(this.library) : undefined;
 
     if (!url) {
       this.svg = null;
@@ -154,7 +166,7 @@ export default class SlIcon extends ShoelaceElement {
       iconCache.delete(url);
     }
 
-    if (url !== this.getUrl()) {
+    if (url !== this.getUrl().url) {
       // If the url has changed while fetching the icon, ignore this request
       return;
     }