diff --git a/package.json b/package.json
index 5bf962a..40a4f31 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-date-picker",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "",
   "main": "tp-date-picker.js",
   "scripts": {
diff --git a/tp-date-picker.js b/tp-date-picker.js
index fc5bc69..03a82b7 100644
--- a/tp-date-picker.js
+++ b/tp-date-picker.js
@@ -156,20 +156,20 @@ class TpDatePicker extends FormElement(LitElement) {
       <div class="header">
         <div>
           <div>
-            <tp-icon .icon=${TpDatePicker.iconPrev} @click=${() => this.previousMonth()}></tp-icon>
+            <tp-icon part="nav-icon" .icon=${TpDatePicker.iconPrev} @click=${() => this.previousMonth()}></tp-icon>
           </div>
           <div>${this.monthNames[month]}</div>
           <div class="right">
-            <tp-icon .icon=${TpDatePicker.iconNext} @click=${() => this.nextMonth()}></tp-icon>
+            <tp-icon part="nav-icon" .icon=${TpDatePicker.iconNext} @click=${() => this.nextMonth()}></tp-icon>
           </div>
         </div>
         <div>
           <div>
-            <tp-icon .icon=${TpDatePicker.iconPrev} @click=${() => this.previousYear()}></tp-icon>
+            <tp-icon part="nav-icon" .icon=${TpDatePicker.iconPrev} @click=${() => this.previousYear()}></tp-icon>
           </div>
           <div class="pointer" @click=${this.showYearOverlay}>${year}</div>
           <div class="right">
-            <tp-icon .icon=${TpDatePicker.iconNext} @click=${() => this.nextYear()}></tp-icon>
+            <tp-icon part="nav-icon" .icon=${TpDatePicker.iconNext} @click=${() => this.nextYear()}></tp-icon>
           </div>
         </div>
       </div>