fixes #626

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

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