Use svg for arrows in calendar

backend/scss/calendar.scss

@@ -9,6 +9,22 @@
         width: 100%;
         font-weight: bold;
 
+        .prev.button,
+        .next.button {
+
+            .svg-arrow {
+                display: block;
+                margin: consts.$margin calc(consts.$margin / 2);
+                fill: consts.$link-color;
+                width: 0.8rem;
+                height: 0.8rem;
+            }
+
+            &:hover .svg-arrow {
+                fill: consts.$link-hover-color;
+            }
+        }
+
         .prev {
             float: left;
         }

backend/templates/calendar.html

@@ -1,6 +1,10 @@
 <div class="calendar">
     <div class="month-selector">
-        <div class="prev button">⯇</div>
+        <div class="prev button">
+            <svg class="svg-arrow" aria-hidden="true" viewBox="0 0 1 1">
+                <polygon points="0.866,0 0.866,1 0,0.5" />
+            </svg>
+        </div>
 
         <div>
             <span class="year"></span>
@@ -22,7 +26,11 @@
             {% endfor %}
         </div>
 
-        <div class="next button">⯈</div>
+        <div class="next button">
+            <svg class="svg-arrow" aria-hidden="true" viewBox="0 0 1 1">
+                <polygon points="0,0 0.866,0.5 0,1" />
+            </svg>
+        </div>
     </div>
 
     <ul class="weekdays">
@@ -49,6 +57,7 @@
     <ul class="days">
         {% for i in 0..5 %}
             {% for j in 0..7 %}
+                {# All days of the current selected month will have the class 'current-month' #}
                 <li id="day-grid-{{i}}{{j}}">
                     <div class="number"></div>
                     <div class="scheduled-recipes"></div>