fixes #999

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

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;

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>(