From 78bcd0fe9e3659a74d62ea36ac6f62a5c6b264df Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 25 Jan 2021 08:56:59 -0500
Subject: [PATCH] Add handle-icon slot to image comparer

---
 docs/getting-started/changelog.md                | 1 +
 src/components/image-comparer/image-comparer.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index e2bcbd745..b9e4cf5a5 100644
--- a/docs/getting-started/changelog.md
+++ b/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
diff --git a/src/components/image-comparer/image-comparer.tsx b/src/components/image-comparer/image-comparer.tsx
index 86cbf1f71..684c571fa 100644
--- a/src/components/image-comparer/image-comparer.tsx
+++ b/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>