backport PR 1572

docs/pages/resources/changelog.md

@@ -24,6 +24,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - Added the `modal` property to `<sl-dialog>` and `<sl-drawer>` to support third-party modals [#1571]
 - Fixed a bug in the autoloader causing it to register non-Shoelace elements [#1563]
 - Fixed a bug in `<wa-switch>` that resulted in improper spacing between the label and the required asterisk [#1540]
+- Fixed a bug in `<sl-icon>` that caused icons to not load when the default library used a sprite [#1572]
 - 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

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 WaIcon extends WebAwesomeElement {
     unwatchIcon(this);
   }
 
-  private getUrl() {
+  private getIconSource(): 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 WaIcon extends WebAwesomeElement {
 
   @watch(['name', 'src', 'library'])
   async setIcon() {
-    const library = getIconLibrary(this.library);
-    const url = this.getUrl();
+    const { url, fromLibrary } = this.getIconSource();
+    const library = fromLibrary ? getIconLibrary(this.library) : undefined;
 
     if (!url) {
       this.svg = null;
@@ -154,7 +166,7 @@ export default class WaIcon extends WebAwesomeElement {
       iconCache.delete(url);
     }
 
-    if (url !== this.getUrl()) {
+    if (url !== this.getIconSource().url) {
       // If the url has changed while fetching the icon, ignore this request
       return;
     }