diff --git a/docs/components/CustomArrowIcon.vue b/docs/components/CustomArrowIcon.vue
new file mode 100644
index 00000000..ec8e7302
--- /dev/null
+++ b/docs/components/CustomArrowIcon.vue
@@ -0,0 +1,66 @@
+<template>
+  <treeselect :options="options" v-model="value">
+    <template slot="arrow-icon" slot-scope="{ isOpen }">
+      {{ isOpen ? "O" : "C" }}
+    </template>
+  </treeselect>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      value: [],
+      options: [
+        {
+          id: 'fruits',
+          label: 'Fruits',
+          children: [
+            {
+              id: 'apple',
+              label: 'Apple 🍎',
+              isNew: true,
+            },
+            {
+              id: 'grapes',
+              label: 'Grapes 🍇',
+            },
+            {
+              id: 'pear',
+              label: 'Pear 🍐',
+            },
+            {
+              id: 'strawberry',
+              label: 'Strawberry 🍓',
+            },
+            {
+              id: 'watermelon',
+              label: 'Watermelon 🍉',
+            },
+          ],
+        },
+        {
+          id: 'vegetables',
+          label: 'Vegetables',
+          children: [
+            {
+              id: 'corn',
+              label: 'Corn 🌽',
+            },
+            {
+              id: 'carrot',
+              label: 'Carrot 🥕',
+            },
+            {
+              id: 'eggplant',
+              label: 'Eggplant 🍆',
+            },
+            {
+              id: 'tomato',
+              label: 'Tomato 🍅',
+            },
+          ],
+        },
+      ],
+    }),
+  }
+</script>
diff --git a/docs/partials/guides.pug b/docs/partials/guides.pug
index 106f2051..b6b763b4 100644
--- a/docs/partials/guides.pug
+++ b/docs/partials/guides.pug
@@ -41,6 +41,7 @@
     This demonstrates more features.
   +demo('MoreFeatures')
 
+
 +subsection('Delayed Loading')
   :markdown-it
     If you have a large number of deeply nested options, you might want to load options only of the most top levels on initial load, and load the rest only when needed. You can achieve that by following these steps:
@@ -130,6 +131,14 @@
     - `node` - a normalized node object (note that, this is differnt from what you return from `normalizer()` prop)
   +demo('CustomizeValueLabel')
 
+
++subsection('Custom Arrow Icon')
+  :markdown-it
+    You can customize the arrow icon. vue-treeselect utilizes Vue's [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) feature and provides some props you should use in your customized template:
+
+    - `isOpen` - true if the menu is open, false otherwise
+  +demo('CustomArrowIcon')
+
 +subsection('Vuex Support')
   :markdown-it
       In all previous examples, we used `v-model` to sync value between application state and vue-treeselect, a.k.a two-way data binding. If you are using Vuex, we could make use of `:value` and `@input`, since `v-model` is just a syntax sugar for them in Vue 2.
diff --git a/src/components/Control.vue b/src/components/Control.vue
index efc67ddc..5227fde7 100644
--- a/src/components/Control.vue
+++ b/src/components/Control.vue
@@ -57,12 +57,18 @@
     methods: {
       renderX() {
         const { instance } = this
-        const title = instance.multiple ? instance.clearAllText : instance.clearValueText
+        const title = instance.multiple
+          ? instance.clearAllText
+          : instance.clearValueText
 
         if (!this.shouldShowX) return null
 
         return (
-          <div class="vue-treeselect__x-container" title={title} onMousedown={this.handleMouseDownOnX}>
+          <div
+            class="vue-treeselect__x-container"
+            title={title}
+            onMousedown={this.handleMouseDownOnX}
+          >
             <DeleteIcon class="vue-treeselect__x" />
           </div>
         )
@@ -77,9 +83,17 @@
 
         if (!this.shouldShowArrow) return null
 
+        const arrowIconRenderer = instance.$scopedSlots['arrow-icon']
         return (
-          <div class="vue-treeselect__control-arrow-container" onMousedown={this.handleMouseDownOnArrow}>
-            <ArrowIcon class={arrowClass} />
+          <div
+            class="vue-treeselect__control-arrow-container"
+            onMousedown={this.handleMouseDownOnArrow}
+          >
+            {arrowIconRenderer ? (
+              arrowIconRenderer({ isOpen: instance.menu.isOpen })
+            ) : (
+              <ArrowIcon class={arrowClass} />
+            )}
           </div>
         )
       },
@@ -129,11 +143,7 @@
 
       // This is meant to be called by child `<Value />` component.
       renderValueContainer(children) {
-        return (
-          <div class="vue-treeselect__value-container">
-            {children}
-          </div>
-        )
+        return <div class="vue-treeselect__value-container">{children}</div>
       },
     },
 
@@ -142,7 +152,10 @@
       const ValueContainer = instance.single ? SingleValue : MultiValue
 
       return (
-        <div class="vue-treeselect__control" onMousedown={instance.handleMouseDown}>
+        <div
+          class="vue-treeselect__control"
+          onMousedown={instance.handleMouseDown}
+        >
           <ValueContainer ref="value-container" />
           {this.renderX()}
           {this.renderArrow()}
diff --git a/test/unit/specs/Control.spec.js b/test/unit/specs/Control.spec.js
index 14825585..f324b638 100644
--- a/test/unit/specs/Control.spec.js
+++ b/test/unit/specs/Control.spec.js
@@ -18,4 +18,35 @@ describe('Control', () => {
     leftClick(arrow)
     expect(wrapper.vm.menu.isOpen).toBe(false)
   })
+
+  it('should render custom slot if provided', () => {
+    const openLabel = 'O'
+    const closeLabel = 'C'
+    const template = `
+    <treeselect ref="treeselect" :options="options" v-model="value">
+      <template slot="arrow-icon" slot-scope="{ isOpen }">
+        {{ isOpen ? "${openLabel}" : "${closeLabel}" }}
+      </template>
+    </treeselect>
+    `
+
+    const wrapper = mount({
+      template,
+      components: { Treeselect },
+      data() {
+        return {
+          options: [],
+          value: '',
+        }
+      },
+    })
+
+    const treeselect = wrapper.vm.$refs.treeselect
+    expect(treeselect.menu.isOpen).toBe(false)
+    const arrowLabel = wrapper.find('.vue-treeselect__control-arrow-container')
+    expect(arrowLabel.text()).toBe(closeLabel)
+    leftClick(arrowLabel)
+    expect(treeselect.menu.isOpen).toBe(true)
+    expect(arrowLabel.text()).toBe(openLabel)
+  })
 })