diff --git a/assets/js/components/MaterialIcon/Add.vue b/assets/js/components/MaterialIcon/Add.vue
index e8b83d25c..59d3e517c 100644
--- a/assets/js/components/MaterialIcon/Add.vue
+++ b/assets/js/components/MaterialIcon/Add.vue
@@ -4,11 +4,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
 import icon from "@/mixins/icon";
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
 	name: "Add",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/BatteryBoost.vue b/assets/js/components/MaterialIcon/BatteryBoost.vue
index 8d8eaa0ec..bfaf40722 100644
--- a/assets/js/components/MaterialIcon/BatteryBoost.vue
+++ b/assets/js/components/MaterialIcon/BatteryBoost.vue
@@ -13,11 +13,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "BatteryBoost",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Circuits.vue b/assets/js/components/MaterialIcon/Circuits.vue
index d54296512..ee7e98d92 100644
--- a/assets/js/components/MaterialIcon/Circuits.vue
+++ b/assets/js/components/MaterialIcon/Circuits.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Circuits",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Climater.vue b/assets/js/components/MaterialIcon/Climater.vue
index 36814a9d5..4ceca0f18 100644
--- a/assets/js/components/MaterialIcon/Climater.vue
+++ b/assets/js/components/MaterialIcon/Climater.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Climater",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/CloudOffline.vue b/assets/js/components/MaterialIcon/CloudOffline.vue
index d24e683a8..5447d44ba 100644
--- a/assets/js/components/MaterialIcon/CloudOffline.vue
+++ b/assets/js/components/MaterialIcon/CloudOffline.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "CloudOffline",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Dropdown.vue b/assets/js/components/MaterialIcon/Dropdown.vue
index 0fda5c81f..626f2e51b 100644
--- a/assets/js/components/MaterialIcon/Dropdown.vue
+++ b/assets/js/components/MaterialIcon/Dropdown.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Dropdown",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/DynamicPrice.vue b/assets/js/components/MaterialIcon/DynamicPrice.vue
index da0056dc1..710de81b8 100644
--- a/assets/js/components/MaterialIcon/DynamicPrice.vue
+++ b/assets/js/components/MaterialIcon/DynamicPrice.vue
@@ -14,11 +14,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "DynamicPrice",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Edit.vue b/assets/js/components/MaterialIcon/Edit.vue
index 66f2186f6..1b004bb21 100644
--- a/assets/js/components/MaterialIcon/Edit.vue
+++ b/assets/js/components/MaterialIcon/Edit.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Edit",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Eebus.vue b/assets/js/components/MaterialIcon/Eebus.vue
index 00fd9d2b0..7a7b6e066 100644
--- a/assets/js/components/MaterialIcon/Eebus.vue
+++ b/assets/js/components/MaterialIcon/Eebus.vue
@@ -11,11 +11,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Eebus",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Forecast.vue b/assets/js/components/MaterialIcon/Forecast.vue
index 186e0e254..a01894fac 100644
--- a/assets/js/components/MaterialIcon/Forecast.vue
+++ b/assets/js/components/MaterialIcon/Forecast.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Forecast",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Hems.vue b/assets/js/components/MaterialIcon/Hems.vue
index e1dbd7b12..79b69319a 100644
--- a/assets/js/components/MaterialIcon/Hems.vue
+++ b/assets/js/components/MaterialIcon/Hems.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Hems",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Influx.vue b/assets/js/components/MaterialIcon/Influx.vue
index 44b0dd54d..7fbc276b6 100644
--- a/assets/js/components/MaterialIcon/Influx.vue
+++ b/assets/js/components/MaterialIcon/Influx.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Influx",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Loadpoint.vue b/assets/js/components/MaterialIcon/Loadpoint.vue
index f323445df..c8251c27f 100644
--- a/assets/js/components/MaterialIcon/Loadpoint.vue
+++ b/assets/js/components/MaterialIcon/Loadpoint.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Loadpoint",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/ModbusProxy.vue b/assets/js/components/MaterialIcon/ModbusProxy.vue
index 68b6a0db6..9bbe30128 100644
--- a/assets/js/components/MaterialIcon/ModbusProxy.vue
+++ b/assets/js/components/MaterialIcon/ModbusProxy.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "ModbusProxy",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Mqtt.vue b/assets/js/components/MaterialIcon/Mqtt.vue
index 5ead19b71..b777cf8ea 100644
--- a/assets/js/components/MaterialIcon/Mqtt.vue
+++ b/assets/js/components/MaterialIcon/Mqtt.vue
@@ -23,11 +23,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Mqtt",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Notification.vue b/assets/js/components/MaterialIcon/Notification.vue
index 88653afbc..44d2ce5f0 100644
--- a/assets/js/components/MaterialIcon/Notification.vue
+++ b/assets/js/components/MaterialIcon/Notification.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Notification",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/PlanEnd.vue b/assets/js/components/MaterialIcon/PlanEnd.vue
index 689deb356..857fa043d 100644
--- a/assets/js/components/MaterialIcon/PlanEnd.vue
+++ b/assets/js/components/MaterialIcon/PlanEnd.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "PlanEnd",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/PlanStart.vue b/assets/js/components/MaterialIcon/PlanStart.vue
index 4c2339542..6c701869d 100644
--- a/assets/js/components/MaterialIcon/PlanStart.vue
+++ b/assets/js/components/MaterialIcon/PlanStart.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "PlanStart",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Play.vue b/assets/js/components/MaterialIcon/Play.vue
index 489d1734d..7099f1ae7 100644
--- a/assets/js/components/MaterialIcon/Play.vue
+++ b/assets/js/components/MaterialIcon/Play.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Play",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Question.vue b/assets/js/components/MaterialIcon/Question.vue
index cd889a1ad..5b48fc7b2 100644
--- a/assets/js/components/MaterialIcon/Question.vue
+++ b/assets/js/components/MaterialIcon/Question.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Question",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Reconnect.vue b/assets/js/components/MaterialIcon/Reconnect.vue
index b8cbb74a9..3c8f0cd9b 100644
--- a/assets/js/components/MaterialIcon/Reconnect.vue
+++ b/assets/js/components/MaterialIcon/Reconnect.vue
@@ -11,11 +11,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Reconnect",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Record.vue b/assets/js/components/MaterialIcon/Record.vue
index 427838a34..c41083c1b 100644
--- a/assets/js/components/MaterialIcon/Record.vue
+++ b/assets/js/components/MaterialIcon/Record.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Record",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Restart.vue b/assets/js/components/MaterialIcon/Restart.vue
index 2b0c66fd4..9477f4505 100644
--- a/assets/js/components/MaterialIcon/Restart.vue
+++ b/assets/js/components/MaterialIcon/Restart.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Restart",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/RfidWait.vue b/assets/js/components/MaterialIcon/RfidWait.vue
index 57d8246e4..aab9e27db 100644
--- a/assets/js/components/MaterialIcon/RfidWait.vue
+++ b/assets/js/components/MaterialIcon/RfidWait.vue
@@ -11,11 +11,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "RfidWait",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/SunDown.vue b/assets/js/components/MaterialIcon/SunDown.vue
index 8338700d0..1b589b95a 100644
--- a/assets/js/components/MaterialIcon/SunDown.vue
+++ b/assets/js/components/MaterialIcon/SunDown.vue
@@ -12,11 +12,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "SunDown",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/SunUp.vue b/assets/js/components/MaterialIcon/SunUp.vue
index 4048025c7..ce62702a0 100644
--- a/assets/js/components/MaterialIcon/SunUp.vue
+++ b/assets/js/components/MaterialIcon/SunUp.vue
@@ -12,11 +12,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "SunUp",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Sync.vue b/assets/js/components/MaterialIcon/Sync.vue
index 152973a3d..eeede5803 100644
--- a/assets/js/components/MaterialIcon/Sync.vue
+++ b/assets/js/components/MaterialIcon/Sync.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Sync",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/TempLimit.vue b/assets/js/components/MaterialIcon/TempLimit.vue
index 2e80236dd..7edea443f 100644
--- a/assets/js/components/MaterialIcon/TempLimit.vue
+++ b/assets/js/components/MaterialIcon/TempLimit.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "TempLimit",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Total.vue b/assets/js/components/MaterialIcon/Total.vue
index 03ca36b9f..8ce458f83 100644
--- a/assets/js/components/MaterialIcon/Total.vue
+++ b/assets/js/components/MaterialIcon/Total.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Total",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/VehicleLimit.vue b/assets/js/components/MaterialIcon/VehicleLimit.vue
index 7e6a2f2b7..08969f477 100644
--- a/assets/js/components/MaterialIcon/VehicleLimit.vue
+++ b/assets/js/components/MaterialIcon/VehicleLimit.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "VehicleLimit",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/VehicleLimitReached.vue b/assets/js/components/MaterialIcon/VehicleLimitReached.vue
index 44ff81cb9..67a211200 100644
--- a/assets/js/components/MaterialIcon/VehicleLimitReached.vue
+++ b/assets/js/components/MaterialIcon/VehicleLimitReached.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "VehicleLimitReached",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/VehicleLimitWarning.vue b/assets/js/components/MaterialIcon/VehicleLimitWarning.vue
index 32888637a..47d758ab4 100644
--- a/assets/js/components/MaterialIcon/VehicleLimitWarning.vue
+++ b/assets/js/components/MaterialIcon/VehicleLimitWarning.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "VehicleLimitWarning",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/VehicleMinSoc.vue b/assets/js/components/MaterialIcon/VehicleMinSoc.vue
index a3948aa23..21ecbb71d 100644
--- a/assets/js/components/MaterialIcon/VehicleMinSoc.vue
+++ b/assets/js/components/MaterialIcon/VehicleMinSoc.vue
@@ -13,11 +13,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "VehicleMinSoc",
 	mixins: [icon],
-};
+});
 </script>
diff --git a/assets/js/components/MaterialIcon/Welcome.vue b/assets/js/components/MaterialIcon/Welcome.vue
index 908abec8a..4bc50dcba 100644
--- a/assets/js/components/MaterialIcon/Welcome.vue
+++ b/assets/js/components/MaterialIcon/Welcome.vue
@@ -7,11 +7,12 @@
 	</svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import icon from "@/mixins/icon";
 
-export default {
+export default defineComponent({
 	name: "Welcome",
 	mixins: [icon],
-};
+});
 </script>