diff --git a/css/app/datepicker.scss b/css/app/datepicker.scss
index 92b6b81e3..9b0882410 100644
--- a/css/app/datepicker.scss
+++ b/css/app/datepicker.scss
@@ -117,6 +117,7 @@
 #app-navigation .datepicker-heading,
 #app-navigation .togglebuttons {
 	display: flex;
+	justify-content: space-around;
 	margin: 0 5px;
 	width: calc(100% - 10px);
 }
@@ -140,10 +141,11 @@
 	z-index: 50; /* Force show border */
 }
 
-#app-navigation .datepicker-heading .button.first,
-#app-navigation .togglebuttons .button.first {
+#app-navigation .datepicker-heading .icon-view-previous,
+#app-navigation .togglebuttons .icon-view-previous {
 	margin-right: -1px;
 	border-radius: 3px 0 0 3px;
+	flex-grow: 1;
 }
 
 #app-navigation .datepicker-heading .button.middle,
@@ -151,34 +153,21 @@
 	margin-left: 0;
 	margin-right: 0;
 	border-radius: 0;
+	flex-grow: 2;
 }
 
-#app-navigation .datepicker-heading .button.last,
-#app-navigation .togglebuttons .button.last {
+#app-navigation .datepicker-heading .icon-view-next,
+#app-navigation .togglebuttons .icon-view-next {
 	margin-left: -1px;
 	border-radius: 0 3px 3px 0;
+	flex-grow: 1;
 }
 
-#app-navigation .datepicker-heading .button.first,
-#app-navigation .datepicker-heading .button.last {
+#app-navigation .datepicker-heading .icon-view-previous,
+#app-navigation .datepicker-heading .icon-view-next {
 	width: 35px;
 }
 
 #app-navigation .datepicker-heading .button.middle {
 	width: calc(100% - 70px);
 }
-
-/* Overrides */
-
-.glyphicon-chevron-left {
-	background: url("../../img/leftarrow.svg") center center no-repeat;
-}
-
-.glyphicon-chevron-right {
-	background: url("../../img/rightarrow.svg") center center no-repeat;
-}
-
-.glyphicon {
-	display: block;
-	height: 15px;
-}
diff --git a/img/leftarrow.svg b/img/leftarrow.svg
deleted file mode 100644
index ddf09ff02..000000000
--- a/img/leftarrow.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="136.3 -90.4 106.9 197.4" style="enable-background:new 136.3 -90.4 106.9 197.4;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#010002;}
-</style>
-<g>
-	<g>
-		<g>
-			<polygon class="st0" points="237.9,107 136.3,8.3 237.9,-90.4 243.1,-85 147.1,8.3 243.1,101.6 			"/>
-		</g>
-	</g>
-</g>
-</svg>
diff --git a/img/rightarrow.svg b/img/rightarrow.svg
deleted file mode 100644
index 1e9640379..000000000
--- a/img/rightarrow.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="136.3 -90.4 106.9 197.4" style="enable-background:new 136.3 -90.4 106.9 197.4;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#010002;}
-</style>
-<g>
-	<g>
-		<g>
-			<polygon class="st0" points="141.5,-90.4 243.1,8.3 141.5,107 136.3,101.6 232.3,8.3 136.3,-85 			"/>
-		</g>
-	</g>
-</g>
-</svg>
diff --git a/templates/part.datepicker.php b/templates/part.datepicker.php
index a9c5314b6..5e371cabe 100644
--- a/templates/part.datepicker.php
+++ b/templates/part.datepicker.php
@@ -23,15 +23,11 @@
  */
 ?>
 <div class="datepicker-heading">
-	<button type="button" class="button first" ng-click="prev()" aria-label="<?php p($l->t('Go back')) ?>">
-		<i class="glyphicon glyphicon-chevron-left"></i>
-	</button>
+	<a href="#" class="icon-view-previous" ng-click="prev()" aria-label="<?php p($l->t('Go back')) ?>"></a>
 	<button ng-cloak type="button" class="button middle" ng-click="toggle()">
 		{{ dt | datepickerFilter:selectedView }}
 	</button>
-	<button type="button" class="button last" ng-click="next()" aria-label="<?php p($l->t('Go forward')) ?>">
-		<i class="glyphicon glyphicon-chevron-right"></i>
-	</button>
+	<a href="#" class="icon-view-next" ng-click="next()" aria-label="<?php p($l->t('Go forward')) ?>"></a>
 </div>
 <div id="datepicker-ng-show-container" class="ng-hide" ng-show="visibility">
 	<div