update to the button if it has an icon in it's default slot (#1461)

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>
-```
+```

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);