From dd657780174fa351d402e0f9e47dd92cf30cba20 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 23 Dec 2021 11:53:37 -0500
Subject: [PATCH] fixes #626

---
 docs/resources/changelog.md            | 3 ++-
 src/components/button/button.styles.ts | 6 +-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 2318e7f5..a2b6d5ee 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -12,7 +12,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - 🚨 BREAKING: removed `base` part from `<sl-divider>` to simplify the styling API
 - Added experimental `<sl-split-panel>` component
 - Added `focus()` and `blur()` methods to `<sl-select>` [#625](https://github.com/shoelace-style/shoelace/pull/625)
-- Fixed bug where setting `tooltipFormatter` on `<sl-range>` in JSX causes React@experimental to error out
+- Fixed a bug where setting `tooltipFormatter` on `<sl-range>` in JSX causes React@experimental to error out
+- Fixed a bug where clicking on a slotted icon in `<sl-button>` wouldn't submit forms [#626](https://github.com/shoelace-style/shoelace/issues/626)
 - Added the `sl-` prefix to generated ids for `<sl-tab>` and `<sl-tab-panel>`
 - Refactored `<sl-button>` to use Lit's static expressions to reduce code
 - Simplified `<sl-spinner>` animation
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 67b16609..dd480620 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -48,16 +48,12 @@ export default css`
     pointer-events: none;
   }
 
-  /* Clicks on icons shouldn't prevent the button from gaining focus */
-  .button::slotted(sl-icon) {
-    pointer-events: none;
-  }
-
   .button__prefix,
   .button__suffix {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
+    pointer-events: none;
   }
 
   .button__label ::slotted(sl-icon) {