From 380e8c0f073253c48af5f21995206c12f020101c Mon Sep 17 00:00:00 2001
From: Jordan Jones <jmjones2463@gmail.com>
Date: Tue, 13 Feb 2024 12:08:57 -0800
Subject: [PATCH] fix(slim): render icon in icononly slim example #245

---
 apiExamples/iconOnlySlim.html |  6 +++---
 demo/api.md                   | 14 ++++++++------
 docs/partials/api.md          |  2 ++
 src/style.scss                |  5 -----
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/apiExamples/iconOnlySlim.html b/apiExamples/iconOnlySlim.html
index 6351640..dabbc09 100644
--- a/apiExamples/iconOnlySlim.html
+++ b/apiExamples/iconOnlySlim.html
@@ -1,9 +1,9 @@
 <auro-button aria-label="home-filled" iconOnly slim>
-  <auro-icon customColor customSize category="interface" name="home-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="home-filled" slot="icon"></auro-icon>
 </auro-button>
 <auro-button aria-label="arrow-left" variant="secondary" iconOnly slim>
-  <auro-icon customColor customSize category="interface" name="arrow-left" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="arrow-left" slot="icon"></auro-icon>
 </auro-button>
 <auro-button aria-label="heart-filled" variant="tertiary" iconOnly slim>
-  <auro-icon customColor customSize category="interface" name="heart-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="heart-filled" slot="icon"></auro-icon>
 </auro-button>
diff --git a/demo/api.md b/demo/api.md
index b9b7364..44ac499 100644
--- a/demo/api.md
+++ b/demo/api.md
@@ -241,17 +241,19 @@ Be sure to also use the `customColor` and `customSize` attributes on the `auro-i
 
 Use the `slim` attribute along with `iconOnly` attribute on the `auro-button` element for a slimmer icon only button with less padding.
 
+Be sure to also use the `customColor` and `customSize` attributes on the `auro-icon` component, as well as add `height` and `width` styles to the `auro-icon` component to allow colors set in your parent element to pass through to the icon.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/iconOnlySlim.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/iconOnlySlim.html -->
   <auro-button aria-label="home-filled" iconOnly slim>
-    <auro-icon customColor customSize category="interface" name="home-filled" slot="icon"></auro-icon>
+    <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="home-filled" slot="icon"></auro-icon>
   </auro-button>
   <auro-button aria-label="arrow-left" variant="secondary" iconOnly slim>
-    <auro-icon customColor customSize category="interface" name="arrow-left" slot="icon"></auro-icon>
+    <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="arrow-left" slot="icon"></auro-icon>
   </auro-button>
   <auro-button aria-label="heart-filled" variant="tertiary" iconOnly slim>
-    <auro-icon customColor customSize category="interface" name="heart-filled" slot="icon"></auro-icon>
+    <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="heart-filled" slot="icon"></auro-icon>
   </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -262,13 +264,13 @@ Use the `slim` attribute along with `iconOnly` attribute on the `auro-button` el
 
 ```html
 <auro-button aria-label="home-filled" iconOnly slim>
-  <auro-icon customColor customSize category="interface" name="home-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="home-filled" slot="icon"></auro-icon>
 </auro-button>
 <auro-button aria-label="arrow-left" variant="secondary" iconOnly slim>
-  <auro-icon customColor customSize category="interface" name="arrow-left" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="arrow-left" slot="icon"></auro-icon>
 </auro-button>
 <auro-button aria-label="heart-filled" variant="tertiary" iconOnly slim>
-  <auro-icon customColor customSize category="interface" name="heart-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="heart-filled" slot="icon"></auro-icon>
 </auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
diff --git a/docs/partials/api.md b/docs/partials/api.md
index 5b0d030..1995132 100644
--- a/docs/partials/api.md
+++ b/docs/partials/api.md
@@ -112,6 +112,8 @@ Be sure to also use the `customColor` and `customSize` attributes on the `auro-i
 
 Use the `slim` attribute along with `iconOnly` attribute on the `auro-button` element for a slimmer icon only button with less padding.
 
+Be sure to also use the `customColor` and `customSize` attributes on the `auro-icon` component, as well as add `height` and `width` styles to the `auro-icon` component to allow colors set in your parent element to pass through to the icon.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/iconOnlySlim.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
diff --git a/src/style.scss b/src/style.scss
index f6fa255..01b45bf 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -373,11 +373,6 @@ slot {
   }
 
   &--iconOnlySlim {
-    ::slotted(auro-icon) {
-      width: calc(var(--ds-size-300, $ds-size-300) - var(--ds-size-50, $ds-size-50));
-      height: calc(var(--ds-size-300, $ds-size-300) - var(--ds-size-50, $ds-size-50));
-    }
-
     padding-left: var(--ds-size-50, $ds-size-50);
     padding-right: var(--ds-size-50, $ds-size-50);
   }