From 80ce2088a0d9149ef519bbbba013d65bbb302356 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 7 May 2024 11:37:41 -0400
Subject: [PATCH] backport shoelace#1927

---
 docs/docs/resources/changelog.md |  2 ++
 src/components/icon/icon.test.ts |  4 ++++
 src/components/icon/icon.ts      | 14 +++++++++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index fc4acd403..2d5ff8734 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -26,6 +26,8 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 - Added support for `contextElement` to `VirtualElements` in `<sl-popup>` [#1874]
 - Added the `sync` property to `<wa-dropdown>` [#1935]
+- Fixed a bug in `<sl-icon>` that did not properly apply mutators to spritesheets [#1927]
+- Fixed a bug in `.sl-scroll-lock` causing layout shifts [#1895]
 - Fixed a bug in `.sl-scroll-lock` causing layout shifts. [#1895]
 - Fixed a bug in `<sl-rating>` that caused the rating to not reset in some circumstances [#1877]
 - Fixed a bug in `<sl-select>` that caused the menu to not close when rendered in a shadow root [#1878]
diff --git a/src/components/icon/icon.test.ts b/src/components/icon/icon.test.ts
index 32aa55f8a..57d1e1c63 100644
--- a/src/components/icon/icon.test.ts
+++ b/src/components/icon/icon.test.ts
@@ -205,6 +205,10 @@ describe('<wa-icon>', () => {
       const rect = use?.getBoundingClientRect();
       expect(rect?.width).to.equal(0);
       expect(rect?.width).to.equal(0);
+
+      // Make sure the mutator is applied.
+      // https://github.com/shoelace-style/shoelace/issues/1925
+      expect(svg?.getAttribute('fill')).to.equal('currentColor');
     });
 
     // TODO: <use> svg icons don't emit a "load" or "error" event...if we can figure out how to get the event to emit errors.
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index dc1efc7b9..976166668 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -44,9 +44,21 @@ export default class WaIcon extends WebAwesomeElement {
     let fileData: Response;
 
     if (library?.spriteSheet) {
-      return html`<svg part="svg">
+      this.svg = html`<svg part="svg">
         <use part="use" href="${url}"></use>
       </svg>`;
+
+      // Using a templateResult requires the SVG to be written to the DOM first before we can grab the SVGElement
+      // to be passed to the library's mutator function.
+      await this.updateComplete;
+
+      const svg = this.shadowRoot!.querySelector("[part='svg']")!;
+
+      if (typeof library.mutator === 'function') {
+        library.mutator(svg as SVGElement);
+      }
+
+      return this.svg;
     }
 
     try {