diff --git a/package.json b/package.json
index ffe6f1e..2420e57 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,11 @@
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.3.3",
     "@rollup/plugin-url": "^5.0.1",
+    "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/commit-analyzer": "^8.0.1",
+    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/npm": "^7.0.6",
+    "@semantic-release/release-notes-generator": "^9.0.1",
     "@types/jest": "^24.0.19",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
@@ -87,18 +92,13 @@
     "rollup-plugin-typescript": "^1.0.1",
     "rollup-plugin-typescript2": "^0.28.0",
     "rollup-plugin-vue": "^6.0.0-beta.10",
+    "semantic-release": "17.2.1",
     "typescript": "^3.9.5",
     "url-loader": "^4.1.0",
     "vue-cli-plugin-vue-next": "~0.1.4",
     "vue-jest": "^5.0.0-alpha.5",
     "vue-loader": "^15.9.3",
-    "webpack-cli": "^3.3.12",
-    "@semantic-release/changelog": "^5.0.1",
-    "@semantic-release/commit-analyzer": "^8.0.1",
-    "@semantic-release/git": "^9.0.0",
-    "@semantic-release/npm": "^7.0.6",
-    "@semantic-release/release-notes-generator": "^9.0.1",
-    "semantic-release": "17.2.1"
+    "webpack-cli": "^3.3.12"
   },
   "husky": {
     "hooks": {
diff --git a/src/components/datepicker/DateInput.vue b/src/components/datepicker/DateInput.vue
index 366d239..56a9379 100644
--- a/src/components/datepicker/DateInput.vue
+++ b/src/components/datepicker/DateInput.vue
@@ -17,7 +17,9 @@
     </span>
     <div v-if="typeable || !hideInput" style="position: relative">
       <span v-if="!inline">
+        <slot name="icon"></slot>
         <IconView
+          v-if="!($slots && $slots.icon)"
           customClass="vuejs3-datepicker__typeablecalendar"
           :color="iconColor"
           :width="iconWidth"
@@ -47,7 +49,9 @@
     <div v-else @click="showCalendar" id="calendar-div">
       <div class="vuejs3-datepicker__value" v-if="!inline">
         <span class="vuejs3-datepicker__icon">
-          <IconView :color="iconColor" :width="iconWidth" :height="iconHeight" />
+          <slot name="icon">
+            <IconView :color="iconColor" :width="iconWidth" :height="iconHeight" />
+          </slot>
         </span>
         <div class="vuejs3-datepicker__content" v-if="formattedValue">{{ formattedValue }}</div>
         <div v-else class="vuejs3-datepicker__content">{{ placeholder }}</div>
diff --git a/src/components/datepicker/Datepicker.vue b/src/components/datepicker/Datepicker.vue
index a442ff8..4076952 100644
--- a/src/components/datepicker/Datepicker.vue
+++ b/src/components/datepicker/Datepicker.vue
@@ -43,6 +43,9 @@
       <template v-slot:belowDate>
         <slot name="belowDate"></slot>
       </template>
+      <template v-slot:icon v-if="hasSlot('icon')">
+        <slot name="icon"></slot>
+      </template>
     </date-input>
     <!--Day View  -->
     <picker-day
@@ -283,7 +286,7 @@ export default defineComponent({
     'selected',
     'selected-disabled',
   ],
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const initmodelvalue = new Date((props.modelValue as unknown) as Date);
     const pageTimestamp = ref<number>(0);
     const selectedDate = ref<Date | string | null>(null);
@@ -300,6 +303,8 @@ export default defineComponent({
     const calendarHeight = ref(0);
     const resetTypedDate = ref(new Date());
 
+    const hasSlot = (name: string): boolean => !!slots[name];
+
     /** ********************************** Computed  *********************************** */
     const computedInitialView = computed(() => {
       if (!props.initialView) {
@@ -641,6 +646,7 @@ export default defineComponent({
       setDate,
       setDate1,
       setValue,
+      hasSlot,
     };
   },
 });
diff --git a/src/components/examples/Slotview.vue b/src/components/examples/Slotview.vue
index 87d4d97..9f29a38 100644
--- a/src/components/examples/Slotview.vue
+++ b/src/components/examples/Slotview.vue
@@ -4,6 +4,20 @@
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker placeholder="Select Date" @input="dateSelected" :value="defaultValue">
+          <template v-slot:icon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              aria-hidden="true"
+              width="10"
+              height="10"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </template>
           <template v-slot:belowDate>
             <p>Below Date Input</p>
           </template>
diff --git a/yarn.lock b/yarn.lock
index a6c4018..84b747e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3910,9 +3910,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001135:
-  version "1.0.30001151"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001151.tgz#1ddfde5e6fff02aad7940b4edb7d3ac76b0cb00b"
-  integrity sha512-Zh3sHqskX6mHNrqUerh+fkf0N72cMxrmflzje/JyVImfpknscMnkeJrlFGJcqTmaa0iszdYptGpWMJCRQDkBVw==
+  version "1.0.30001480"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz"
+  integrity sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"