Use filled icons in calendar type select when selected

aleksis/core/frontend/components/calendar/CalendarTypeSelect.vue

@@ -14,17 +14,20 @@ export default {
         {
           type: "month",
           translationKey: "calendar.month",
-          icon: "calendar-month-outline",
+          icon: "mdi-calendar-month-outline",
+          iconActive: "mdi-calendar-month",
         },
         {
           type: "week",
           translationKey: "calendar.week",
-          icon: "calendar-week-outline",
+          icon: "mdi-calendar-week-outline",
+          iconActive: "mdi-calendar-week",
         },
         {
           type: "day",
           translationKey: "calendar.day",
-          icon: "calendar-today-outline",
+          icon: "mdi-calendar-today-outline",
+          iconActive: "mdi-calendar-today",
         },
       ],
     };
@@ -53,7 +56,9 @@ export default {
       :key="calendarType.type"
     >
       <v-icon v-if="$vuetify.breakpoint.smAndDown">{{
-        "mdi-" + calendarType.icon
+        calendarType.type === innerValue
+          ? calendarType.iconActive
+          : calendarType.icon
       }}</v-icon>
       <span class="hidden-sm-and-down">{{ nameForMenu(calendarType) }}</span>
     </v-btn>