From 6a771ff1a7bbe170be8b31600d5349298298cb4d Mon Sep 17 00:00:00 2001
From: Aviv Day <avivday@gmail.com>
Date: Wed, 8 Sep 2021 01:20:09 +0300
Subject: [PATCH] Adding slot for arrow icon

Will give the flexibility to change the arrow icon of the select box (many design teams ask for it) closing issue #322 in a more elegant way than the other PR suggested.
---
 src/components/Control.vue | 17 +++++++++++++++--
 src/style.less             |  4 ++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Control.vue b/src/components/Control.vue
index efc67ddc..d53a3844 100644
--- a/src/components/Control.vue
+++ b/src/components/Control.vue
@@ -68,18 +68,31 @@
         )
       },
 
-      renderArrow() {
+      getArrow() {
         const { instance } = this
+        const arrowIconRenderer = instance.$scopedSlots['arrow-icon']
+
         const arrowClass = {
           'vue-treeselect__control-arrow': true,
           'vue-treeselect__control-arrow--rotated': instance.menu.isOpen,
+          'vue-treeselect__control-arrow--custom': arrowIconRenderer,
+        }
+
+        if (arrowIconRenderer) {
+          return (
+            <div class={arrowClass}> { arrowIconRenderer() }</div>
+           )
         }
 
+        return <ArrowIcon class={arrowClass} />
+      },
+
+      renderArrow() {
         if (!this.shouldShowArrow) return null
 
         return (
           <div class="vue-treeselect__control-arrow-container" onMousedown={this.handleMouseDownOnArrow}>
-            <ArrowIcon class={arrowClass} />
+            { this.getArrow() }
           </div>
         )
       },
diff --git a/src/style.less b/src/style.less
index b04d1d83..c8b3962b 100644
--- a/src/style.less
+++ b/src/style.less
@@ -686,6 +686,10 @@
   }
 }
 
+.vue-treeselect__control-arrow--custom {
+  height: unset;
+}
+
 .vue-treeselect__control-arrow--rotated {
   transform: rotateZ(180deg);
 }