From 49193c972f54edfa8c710fb909fd6b293561ddee Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 8 Nov 2022 12:15:14 -0500
Subject: [PATCH] fixes #999

---
 docs/resources/changelog.md                   |  1 +
 .../icon-button/icon-button.styles.ts         |  3 ++-
 .../icon-button/icon-button.test.ts           | 19 +++++++++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index e27a8fd2f..28759b17b 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -18,6 +18,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug in `<sl-card>` that prevented the border radius to apply correctly to the header [#934](https://github.com/shoelace-style/shoelace/pull/934)
 - Fixed a bug in `<sl-button-group>` where the inner border disappeared on focus [#980](https://github.com/shoelace-style/shoelace/pull/980)
 - Fixed a bug that caused prefix/suffix animations in `<sl-input>` to wobble [#996](https://github.com/shoelace-style/shoelace/issues/996)
+- Fixed a bug in `<sl-icon>` that prevented color from being set on the host element [#999](https://github.com/shoelace-style/shoelace/issues/999)
 - Improved `<sl-badge>` to improve padding and render relative to the current font size
 - Updated Lit to 2.4.1
 - Updated TypeScript to 4.8.4
diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts
index 2d1c93c6b..0731c8037 100644
--- a/src/components/icon-button/icon-button.styles.ts
+++ b/src/components/icon-button/icon-button.styles.ts
@@ -6,6 +6,7 @@ export default css`
 
   :host {
     display: inline-block;
+    color: var(--sl-color-neutral-600);
   }
 
   .icon-button {
@@ -16,7 +17,7 @@ export default css`
     border: none;
     border-radius: var(--sl-border-radius-medium);
     font-size: inherit;
-    color: var(--sl-color-neutral-600);
+    color: inherit;
     padding: var(--sl-spacing-x-small);
     cursor: pointer;
     transition: var(--sl-transition-medium) color;
diff --git a/src/components/icon-button/icon-button.test.ts b/src/components/icon-button/icon-button.test.ts
index 6f3a7c48e..3648d14e1 100644
--- a/src/components/icon-button/icon-button.test.ts
+++ b/src/components/icon-button/icon-button.test.ts
@@ -27,6 +27,25 @@ describe('<sl-icon-button>', () => {
     });
   });
 
+  describe('when styling the host element', () => {
+    it('renders the correct color and font size', async () => {
+      const el = await fixture<SlIconButton>(
+        html`
+          <sl-icon-button
+            library="system"
+            name="check-lg"
+            style="color: rgb(0, 136, 221); font-size: 2rem;"
+          ></sl-icon-button>
+        `
+      );
+      const icon = el.shadowRoot!.querySelector('sl-icon')!;
+      const styles = getComputedStyle(icon);
+
+      expect(styles.color).to.equal('rgb(0, 136, 221)');
+      expect(styles.fontSize).to.equal('32px');
+    });
+  });
+
   describe('when icon attributes are present', () => {
     it('renders an sl-icon from a library', async () => {
       const el = await fixture<SlIconButton>(