Add handle-icon slot to image comparer

docs/getting-started/changelog.md

@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- Added `handle-icon` slot to `sl-image-comparer` [#311](https://github.com/shoelace-style/shoelace/issues/311)
 - Fixed a bug in `sl-select` where removing a tag would toggle the dropdown
 - Updated `sl-menu-item` focus styles
 - Updated `sl-select` so tags will wrap when `multiple` is true

src/components/image-comparer/image-comparer.tsx

@@ -7,6 +7,7 @@ import { clamp } from '../../utilities/math';
  *
  * @slot before - The before image, an `<img>` or `<svg>` element.
  * @slot after - The after image, an `<img>` or `<svg>` element.
+ * @slot handle-icon - The icon used inside the handle.
  *
  * @part base - The component's base wrapper.
  * @part before - The container that holds the "before" image.
@@ -135,7 +136,9 @@ export class ImageComparer {
             aria-valuemax="100"
             tabIndex={0}
           >
-            <sl-icon class="image-comparer__handle-icon" name="grip-vertical" />
+            <slot name="handle-icon">
+              <sl-icon class="image-comparer__handle-icon" name="grip-vertical" />
+            </slot>
           </div>
         </div>
       </div>