diff --git a/packages/webawesome/docs/docs/components/button.md b/packages/webawesome/docs/docs/components/button.md
index 83b88b48a..e56ae8d28 100644
--- a/packages/webawesome/docs/docs/components/button.md
+++ b/packages/webawesome/docs/docs/components/button.md
@@ -183,6 +183,9 @@ Use the `start` and `end` slots to add presentational elements like `<wa-icon>`
 Use the `with-caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
 
 ```html {.example}
+<wa-button size="small" with-caret>
+  <wa-icon name="gear" label="Settings"></wa-icon>
+</wa-button>
 <wa-button size="small" with-caret>Small</wa-button>
 <wa-button size="medium" with-caret>Medium</wa-button>
 <wa-button size="large" with-caret>Large</wa-button>
@@ -251,4 +254,4 @@ This example demonstrates how to style buttons using a custom class. This is the
     outline-offset: 4px;
   }
 </style>
-```
\ No newline at end of file
+```
diff --git a/packages/webawesome/src/components/button/button.css b/packages/webawesome/src/components/button/button.css
index a3b0e1783..9e41abda3 100644
--- a/packages/webawesome/src/components/button/button.css
+++ b/packages/webawesome/src/components/button/button.css
@@ -178,6 +178,10 @@
   aspect-ratio: 1;
 }
 
+.button.is-icon-button:has(wa-icon) {
+  width: auto;
+}
+
 /* Pill modifier */
 :host([pill]) .button {
   border-radius: var(--wa-border-radius-pill);