diff --git a/.eslintrc.js b/.eslintrc.js
index e5a59c4c12..d3a4534888 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,7 +12,9 @@ module.exports = {
 	parserOptions: {
 		ecmaVersion: 2020,
 	},
+	plugins: ["schulcloud"],
 	rules: {
+		"schulcloud/material-icon-imports": "error",
 		"@typescript-eslint/no-explicit-any": "warn",
 		"no-console": process.env.NODE_ENV === "production" ? "off" : "warn",
 		"no-debugger": process.env.NODE_ENV === "production" ? "off" : "warn",
diff --git a/Dockerfile b/Dockerfile
index 8036526997..24c64b639f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,6 +7,7 @@ RUN apt update && apt install -y g++ libcairo2-dev libpango1.0-dev libjpeg-dev l
 WORKDIR /app
 
 COPY package.json package-lock.json ./
+COPY lib/eslint-plugin-schulcloud ./lib/eslint-plugin-schulcloud
 RUN npm ci
 
 COPY babel.config.js .eslintrc.js LICENSE.md .prettierrc.js tsconfig.json tsconfig.build.json .eslintignore .prettierignore ./
diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
index 37e515e7e3..6a094df10a 100644
--- a/config/webpack/webpack.common.js
+++ b/config/webpack/webpack.common.js
@@ -157,6 +157,7 @@ module.exports = {
 			"@feature-news-form": getDir("src/modules/feature/news-form"),
 			"@feature-media-shelf": getDir("src/modules/feature/media-shelf"),
 			"@feature-room": getDir("src/modules/feature/room"),
+			"@icons": getDir("src/components/icons"),
 			"@ui-alert": getDir("src/modules/ui/alert"),
 			"@ui-board": getDir("src/modules/ui/board"),
 			"@ui-chip": getDir("src/modules/ui/chip"),
diff --git a/jest.config.js b/jest.config.js
index ac71ab34b3..d54c09d935 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,6 +18,7 @@ const config = {
 		"^@page-(.*)$": "<rootDir>/src/modules/page/$1",
 		"^@ui-(.*)$": "<rootDir>/src/modules/ui/$1",
 		"^@util-(.*)$": "<rootDir>/src/modules/util/$1",
+		"^@icons(.*)$": "<rootDir>/src/components/icons/$1",
 		"^@/(.*)$": "<rootDir>/src/$1",
 		"^@@/(.*)$": "<rootDir>/$1",
 	},
@@ -55,6 +56,7 @@ const config = {
 		"<rootDir>/src/utils/**/*.(js|ts)",
 		"<rootDir>/src/composables/**/*.(js|ts)",
 		"<rootDir>/src/layouts/**/*.{js,ts,vue}",
+		"<rootDir>/lib/eslint-plugin-schulcloud/**/*.{js,ts,vue}",
 		// Exclude
 		"!<rootDir>/src/components/base/**/*",
 		"!<rootDir>/src/components/icons/**/*",
diff --git a/lib/eslint-plugin-schulcloud/index.js b/lib/eslint-plugin-schulcloud/index.js
new file mode 100644
index 0000000000..160bc91c04
--- /dev/null
+++ b/lib/eslint-plugin-schulcloud/index.js
@@ -0,0 +1,7 @@
+const materialIconImportRule = require("./material-icon-imports");
+
+module.exports = {
+	rules: {
+		"material-icon-imports": materialIconImportRule,
+	},
+};
diff --git a/lib/eslint-plugin-schulcloud/material-icon-imports.js b/lib/eslint-plugin-schulcloud/material-icon-imports.js
new file mode 100644
index 0000000000..146ed119f8
--- /dev/null
+++ b/lib/eslint-plugin-schulcloud/material-icon-imports.js
@@ -0,0 +1,38 @@
+module.exports = {
+	meta: {
+		type: "problem",
+		docs: {
+			description:
+				"Enforce that icons are imported from our own subset of icons instead of the full Material Icons library.",
+		},
+		messages: {
+			noDirectIconImport:
+				"Material icons should only be imported from '@icons/material'.",
+		},
+		fixable: "code",
+	},
+
+	create(context) {
+		return {
+			ImportDeclaration(node) {
+				const importPath = node.source.value;
+
+				node.specifiers.forEach((specifier) => {
+					const isMaterialIconImport =
+						specifier.type === "ImportSpecifier" &&
+						/^mdi[A-Z]/.test(specifier.imported.name); // match 'mdi' followed by a capital letter
+
+					if (isMaterialIconImport && importPath !== "@icons/material") {
+						context.report({
+							node: specifier,
+							messageId: "noDirectIconImport",
+							fix: (fixer) => {
+								return fixer.replaceText(node.source, '"@icons/material"');
+							},
+						});
+					}
+				});
+			},
+		};
+	},
+};
diff --git a/lib/eslint-plugin-schulcloud/material-icon-imports.unit.js b/lib/eslint-plugin-schulcloud/material-icon-imports.unit.js
new file mode 100644
index 0000000000..ed01450cd4
--- /dev/null
+++ b/lib/eslint-plugin-schulcloud/material-icon-imports.unit.js
@@ -0,0 +1,44 @@
+"use strict";
+
+const { RuleTester } = require("eslint");
+const rule = require("./material-icon-imports.js");
+
+const ruleTester = new RuleTester({
+	parserOptions: { ecmaVersion: 2020, sourceType: "module" },
+});
+
+ruleTester.run("material-icon-imports", rule, {
+	valid: [
+		{
+			code: `import { mdiCheck } from "@icons/material";`,
+		},
+		{
+			code: `import { useI18n } from "vue-i18n";`,
+		},
+		{
+			code: `import { mdi } from "vuetify/iconsets/mdi-svg";`,
+		},
+	],
+	invalid: [
+		{
+			code: `import { mdiCheck } from "@mdi/js";`,
+			errors: [{ messageId: "noDirectIconImport" }],
+			output: `import { mdiCheck } from "@icons/material";`,
+		},
+		{
+			code: `import { mdiAlert } from "@/components/icons/material";`,
+			errors: [{ messageId: "noDirectIconImport" }],
+			output: `import { mdiAlert } from "@icons/material";`,
+		},
+		{
+			code: `import { mdiCheck } from "some-other-path";`,
+			errors: [{ messageId: "noDirectIconImport" }],
+			output: `import { mdiCheck } from "@icons/material";`,
+		},
+		{
+			code: `import { mdiCheck } from "../icons/material";`,
+			errors: [{ messageId: "noDirectIconImport" }],
+			output: `import { mdiCheck } from "@icons/material";`,
+		},
+	],
+});
diff --git a/package-lock.json b/package-lock.json
index 2678f37597..9d9a5fefaa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,6 +63,7 @@
 				"eslint": "^8.57.0",
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-prettier": "^5.1.3",
+				"eslint-plugin-schulcloud": "file:lib/eslint-plugin-schulcloud",
 				"eslint-plugin-vue": "^9.23.0",
 				"eslint-webpack-plugin": "^4.1.0",
 				"fishery": "^2.2.2",
@@ -92,6 +93,13 @@
 				"npm": ">=9"
 			}
 		},
+		"eslint-plugin-schulcloud": {
+			"version": "1.0.0",
+			"extraneous": true
+		},
+		"lib/eslint-plugin-schulcloud": {
+			"dev": true
+		},
 		"node_modules/@ampproject/remapping": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -7672,6 +7680,10 @@
 				}
 			}
 		},
+		"node_modules/eslint-plugin-schulcloud": {
+			"resolved": "lib/eslint-plugin-schulcloud",
+			"link": true
+		},
 		"node_modules/eslint-plugin-vue": {
 			"version": "9.27.0",
 			"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz",
diff --git a/package.json b/package.json
index c980de5257..46d19bb7dc 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
 		"test:unit": "npx jest",
 		"test:unit:ci": "npm run test:unit -- --coverage --ci --maxWorkers=4",
 		"lint": "npx eslint 'src/**/*.{ts,js,vue}'",
+		"lint:fix": "npx eslint 'src/**/*.{ts,js,vue}' --fix",
 		"generate-client:server": "node generate-client.js -c openapitools-for-server.json",
 		"generate-client:filestorage": "node generate-client.js -u 'http://localhost:4444/api/v3/docs-json/' -p 'src/fileStorageApi/v3' -c 'openapitools-for-file-storage.json'",
 		"generate-client:h5p-editor": "node generate-client.js -u 'http://localhost:4448/api/v3/docs-json/' -p 'src/h5pEditorApi/v3' -c 'openapitools-for-h5p-editor.json'"
@@ -73,6 +74,7 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.1.3",
 		"eslint-plugin-vue": "^9.23.0",
+		"eslint-plugin-schulcloud": "file:lib/eslint-plugin-schulcloud",
 		"eslint-webpack-plugin": "^4.1.0",
 		"fishery": "^2.2.2",
 		"html-webpack-plugin": "^5.6.0",
diff --git a/src/components/administration/AdminMigrationSection.vue b/src/components/administration/AdminMigrationSection.vue
index f9abcf27a2..18beaa9ec9 100644
--- a/src/components/administration/AdminMigrationSection.vue
+++ b/src/components/administration/AdminMigrationSection.vue
@@ -201,7 +201,7 @@
 </template>
 
 <script lang="ts">
-import { mdiAlertCircle, mdiCheck } from "@/components/icons/material";
+import { mdiAlertCircle, mdiCheck } from "@icons/material";
 import { useUserLoginMigrationMappings } from "@/composables/user-login-migration-mappings.composable";
 import { BusinessError } from "@/store/types/commons";
 import { School } from "@/store/types/schools";
diff --git a/src/components/administration/ExternalToolSection.unit.ts b/src/components/administration/ExternalToolSection.unit.ts
index cf1b64649d..2352cb457a 100644
--- a/src/components/administration/ExternalToolSection.unit.ts
+++ b/src/components/administration/ExternalToolSection.unit.ts
@@ -22,7 +22,7 @@ import {
 } from "@@/tests/test-utils/setup";
 import { useSchoolExternalToolUsage } from "@data-external-tool";
 import { createMock, DeepMocked } from "@golevelup/ts-jest";
-import { mdiAlert, mdiCheckCircle } from "@mdi/js";
+import { mdiAlert, mdiCheckCircle } from "@icons/material";
 import { mount, VueWrapper } from "@vue/test-utils";
 import { nextTick, ref } from "vue";
 import vueDompurifyHTMLPlugin from "vue-dompurify-html";
diff --git a/src/components/administration/ExternalToolSection.vue b/src/components/administration/ExternalToolSection.vue
index 1514055985..0cf58d7994 100644
--- a/src/components/administration/ExternalToolSection.vue
+++ b/src/components/administration/ExternalToolSection.vue
@@ -172,7 +172,7 @@ import {
 } from "@/utils/inject";
 import { useSchoolExternalToolUsage } from "@data-external-tool";
 import { RenderHTML } from "@feature-render-html";
-import { mdiAlert, mdiCheckCircle } from "@mdi/js";
+import { mdiAlert, mdiCheckCircle } from "@icons/material";
 import {
 	computed,
 	ComputedRef,
diff --git a/src/components/administration/ExternalToolToolbar.vue b/src/components/administration/ExternalToolToolbar.vue
index 0d62eabbcb..641bd82459 100644
--- a/src/components/administration/ExternalToolToolbar.vue
+++ b/src/components/administration/ExternalToolToolbar.vue
@@ -56,7 +56,7 @@ import {
 	mdiPencilOutline,
 	mdiTrashCanOutline,
 	mdiFileDocumentOutline,
-} from "@mdi/js";
+} from "@icons/material";
 
 defineEmits(["edit", "datasheet", "delete"]);
 </script>
diff --git a/src/components/atoms/InfoMessage.vue b/src/components/atoms/InfoMessage.vue
index 540c9cbb2d..61e64e31b5 100644
--- a/src/components/atoms/InfoMessage.vue
+++ b/src/components/atoms/InfoMessage.vue
@@ -5,7 +5,7 @@
 	</div>
 </template>
 <script>
-import { mdiAlert } from "@/components/icons/material";
+import { mdiAlert } from "@icons/material";
 export default {
 	props: {
 		message: {
diff --git a/src/components/atoms/VCustomChipTimeRemaining.vue b/src/components/atoms/VCustomChipTimeRemaining.vue
index 31609e7286..f83cbca2ee 100644
--- a/src/components/atoms/VCustomChipTimeRemaining.vue
+++ b/src/components/atoms/VCustomChipTimeRemaining.vue
@@ -14,7 +14,7 @@
 <script>
 import { fromNowToFuture } from "@/plugins/datetime";
 import dayjs from "dayjs";
-import { mdiTimerSandComplete } from "@mdi/js";
+import { mdiTimerSandComplete } from "@icons/material";
 
 export default {
 	props: {
diff --git a/src/components/atoms/vCustomBreadcrumbs.vue b/src/components/atoms/vCustomBreadcrumbs.vue
index c79f1e413e..1a7aa22849 100644
--- a/src/components/atoms/vCustomBreadcrumbs.vue
+++ b/src/components/atoms/vCustomBreadcrumbs.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiChevronLeft } from "@mdi/js";
+import { mdiChevronLeft } from "@icons/material";
 
 defineProps({
 	breadcrumbs: {
diff --git a/src/components/atoms/vRoomAvatar.unit.ts b/src/components/atoms/vRoomAvatar.unit.ts
index 0aee1b35ff..2a20de8c76 100644
--- a/src/components/atoms/vRoomAvatar.unit.ts
+++ b/src/components/atoms/vRoomAvatar.unit.ts
@@ -3,7 +3,7 @@ import {
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
 import { createMock } from "@golevelup/ts-jest";
-import { mdiSync } from "@mdi/js";
+import { mdiSync } from "@icons/material";
 import { mount } from "@vue/test-utils";
 import { VBadge } from "vuetify/lib/components/index.mjs";
 import vRoomAvatar from "./vRoomAvatar.vue";
diff --git a/src/components/atoms/vRoomAvatar.vue b/src/components/atoms/vRoomAvatar.vue
index c69a717ef9..3c0bc78e0e 100644
--- a/src/components/atoms/vRoomAvatar.vue
+++ b/src/components/atoms/vRoomAvatar.vue
@@ -48,7 +48,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { mdiLock, mdiSync } from "@/components/icons/material";
+import { mdiLock, mdiSync } from "@icons/material";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 
diff --git a/src/components/atoms/vRoomEmptyAvatar.vue b/src/components/atoms/vRoomEmptyAvatar.vue
index 4fcb3566c1..d58b0b6eb9 100644
--- a/src/components/atoms/vRoomEmptyAvatar.vue
+++ b/src/components/atoms/vRoomEmptyAvatar.vue
@@ -23,7 +23,7 @@
 	</div>
 </template>
 <script>
-import { mdiLock } from "@/components/icons/material";
+import { mdiLock } from "@icons/material";
 export default {
 	props: {
 		size: {
diff --git a/src/components/base/BaseInput/BaseInputCheckbox.vue b/src/components/base/BaseInput/BaseInputCheckbox.vue
index f8cf5e04d3..91f709d7d0 100644
--- a/src/components/base/BaseInput/BaseInputCheckbox.vue
+++ b/src/components/base/BaseInput/BaseInputCheckbox.vue
@@ -21,6 +21,11 @@
 	</label>
 </template>
 <script>
+import {
+	mdiCheckboxBlankOutline,
+	mdiCheckboxIntermediate,
+	mdiCheckboxOutline,
+} from "@icons/material";
 export const supportedTypes = ["checkbox"];
 
 export default {
@@ -62,11 +67,11 @@ export default {
 		},
 		visibleIcon() {
 			if (this.showUndefinedState && this.modelValue === undefined) {
-				return { name: "$mdiCheckboxIntermediate" };
+				return { name: mdiCheckboxIntermediate };
 			}
 			return this.isChecked
-				? { name: "$mdiCheckboxOutline" }
-				: { name: "$mdiCheckboxBlankOutline" };
+				? { name: mdiCheckboxOutline }
+				: { name: mdiCheckboxBlankOutline };
 		},
 	},
 	created() {
diff --git a/src/components/base/BaseInput/BaseInputDefault.vue b/src/components/base/BaseInput/BaseInputDefault.vue
index c90f307e1c..aac701b67f 100644
--- a/src/components/base/BaseInput/BaseInputDefault.vue
+++ b/src/components/base/BaseInput/BaseInputDefault.vue
@@ -64,12 +64,16 @@
 					>
 						<v-icon>{{ visibilityIcon }}</v-icon>
 					</v-btn>
-					<v-icon v-if="hasError" color="rgba(var(--v-theme-error))"
-						>$mdiAlert</v-icon
-					>
-					<v-icon v-if="success" color="rgba(var(--v-theme-success))">
-						$mdiCheckCircleOutline
-					</v-icon>
+					<v-icon
+						v-if="hasError"
+						color="rgba(var(--v-theme-error))"
+						:icon="mdiAlert"
+					/>
+					<v-icon
+						v-if="success"
+						color="rgba(var(--v-theme-success))"
+						:icon="mdiCheckCircleOutline"
+					/>
 				</div>
 			</div>
 		</div>
@@ -88,7 +92,12 @@
 </template>
 <script>
 import { inputRangeDate } from "@/plugins/datetime";
-import { mdiEyeOffOutline, mdiEyeOutline } from "@mdi/js";
+import {
+	mdiAlert,
+	mdiCheckCircleOutline,
+	mdiEyeOffOutline,
+	mdiEyeOutline,
+} from "@icons/material";
 import { defineComponent } from "vue";
 import { useUid } from "@/utils/uid";
 
@@ -144,6 +153,8 @@ export default defineComponent({
 	},
 	data() {
 		return {
+			mdiAlert,
+			mdiCheckCircleOutline,
 			mdiEyeOffOutline,
 			mdiEyeOutline,
 			hasFocus: false,
diff --git a/src/components/copy-result-modal/CopyResultModal.vue b/src/components/copy-result-modal/CopyResultModal.vue
index 51d9d7378a..7a1652da07 100644
--- a/src/components/copy-result-modal/CopyResultModal.vue
+++ b/src/components/copy-result-modal/CopyResultModal.vue
@@ -55,7 +55,7 @@ import {
 	mdiCheckCircle,
 	mdiCloseCircle,
 	mdiInformation,
-} from "@mdi/js";
+} from "@icons/material";
 
 export default {
 	name: "CopyResultModal",
diff --git a/src/components/copy-result-modal/CopyResultModalListItem.vue b/src/components/copy-result-modal/CopyResultModalListItem.vue
index cddd9a4837..46a05e60d2 100644
--- a/src/components/copy-result-modal/CopyResultModalListItem.vue
+++ b/src/components/copy-result-modal/CopyResultModalListItem.vue
@@ -23,7 +23,7 @@
 
 <script>
 import { CopyApiResponseTypeEnum } from "@/serverApi/v3";
-import { mdiChevronLeft, mdiMenuRight } from "@mdi/js";
+import { mdiChevronLeft, mdiMenuRight } from "@icons/material";
 
 export default {
 	name: "CopyResultModalListItem",
diff --git a/src/components/external-tools/configuration/ExternalToolConfigurator.vue b/src/components/external-tools/configuration/ExternalToolConfigurator.vue
index caf4a4bb30..8f0d1744bc 100644
--- a/src/components/external-tools/configuration/ExternalToolConfigurator.vue
+++ b/src/components/external-tools/configuration/ExternalToolConfigurator.vue
@@ -100,7 +100,7 @@
 
 <script setup lang="ts">
 import ExternalToolConfigSettings from "@/components/external-tools/configuration/ExternalToolConfigSettings.vue";
-import { mdiAlertCircle } from "@/components/icons/material";
+import { mdiAlertCircle, mdiContentPaste } from "@icons/material";
 import { useExternalToolMappings } from "@/composables/external-tool-mappings.composable";
 import {
 	SchoolExternalTool,
@@ -114,7 +114,6 @@ import {
 	ContextExternalTool,
 	ExternalToolConfigurationTemplate,
 } from "@data-external-tool";
-import { mdiContentPaste } from "@mdi/js";
 import {
 	computed,
 	ComputedRef,
diff --git a/src/components/icons/custom/mdi_custom_grid_outline.vue b/src/components/icons/custom/grid-outline.vue
similarity index 100%
rename from src/components/icons/custom/mdi_custom_grid_outline.vue
rename to src/components/icons/custom/grid-outline.vue
diff --git a/src/components/icons/custom/index.ts b/src/components/icons/custom/index.ts
index c561bd8b9c..d856f45529 100644
--- a/src/components/icons/custom/index.ts
+++ b/src/components/icons/custom/index.ts
@@ -1,3 +1,4 @@
+import { Component } from "vue";
 import brb from "./brb.vue";
 import classIcon from "./class.vue";
 import dBildungscloud from "./dBildungscloud.vue";
@@ -6,43 +7,43 @@ import folderOpenCoursesOutline from "./folder_open_courses_outline.vue";
 import folderOpenSharedOutline from "./folder_open_shared_outline.vue";
 import folderOpenTeamsOutline from "./folder_open_teams_outline.vue";
 import folderOpenUserOutline from "./folder_open_user_outline.vue";
+import gridOutline from "./grid-outline.vue";
 import hourglassDisabled from "./hourglass-disabled.vue";
 import icCollection from "./ic_collection.vue";
-import icDefaultCircle from "./ic_default-circle.vue";
 import icDefault from "./ic_default.vue";
-import icImageCircle from "./ic_image-circle.vue";
+import icDefaultCircle from "./ic_default-circle.vue";
 import icImage from "./ic_image.vue";
-import icLinkCircle from "./ic_link-circle.vue";
+import icImageCircle from "./ic_image-circle.vue";
 import icLink from "./ic_link.vue";
+import icLinkCircle from "./ic_link-circle.vue";
 import icMoveTo from "./ic_move-to.vue";
-import icPdfCircle from "./ic_pdf-circle.vue";
 import icPdf from "./ic_pdf.vue";
-import icSoundCircle from "./ic_sound-circle.vue";
+import icPdfCircle from "./ic_pdf-circle.vue";
 import icSound from "./ic_sound.vue";
-import icVideoCircle from "./ic_video-circle.vue";
+import icSoundCircle from "./ic_sound-circle.vue";
 import icVideo from "./ic_video.vue";
-import icWordCircle from "./ic_word-circle.vue";
+import icVideoCircle from "./ic_video-circle.vue";
 import icWord from "./ic_word.vue";
+import icWordCircle from "./ic_word-circle.vue";
 import langIconDe from "./lang-icon-de.vue";
 import langIconEn from "./lang-icon-en.vue";
 import langIconEs from "./lang-icon-es.vue";
 import langIconUk from "./lang-icon-uk.vue";
 import lernstoreOutline from "./lernstore_outline.vue";
-import mdiCustomGridOutline from "./mdi_custom_grid_outline.vue";
-import MdiCustomShelfOutline from "./MdiCustomShelfOutline.vue";
 import n21 from "./n21.vue";
 import schoolOutline from "./school_outline.vue";
-import taskDoneFilled from "./task-done-filled.vue";
+import shelfOutline from "./shelf-outline.vue";
 import taskDone from "./task-done.vue";
+import taskDoneFilled from "./task-done-filled.vue";
 import taskDraft from "./task-draft.vue";
-import taskMissedFilled from "./task-missed-filled.vue";
 import taskMissed from "./task-missed.vue";
+import taskMissedFilled from "./task-missed-filled.vue";
 import taskOpenFilled from "./task-open-filled.vue";
 import tasks from "./tasks.vue";
 import teacher from "./teacher.vue";
 import thr from "./thr.vue";
 
-const customAliases: Record<string, any> = {
+const customAliases: Record<string, Component> = {
 	brb: brb,
 	class: classIcon,
 	dBildungscloud: dBildungscloud,
@@ -51,6 +52,7 @@ const customAliases: Record<string, any> = {
 	folder_open_shared_outline: folderOpenSharedOutline,
 	folder_open_teams_outline: folderOpenTeamsOutline,
 	folder_open_user_outline: folderOpenUserOutline,
+	gridOutline: gridOutline,
 	hourglassDisabled: hourglassDisabled,
 	ic_collection: icCollection,
 	"ic_default-circle": icDefaultCircle,
@@ -73,10 +75,9 @@ const customAliases: Record<string, any> = {
 	langIconEs: langIconEs,
 	langIconUk: langIconUk,
 	lernstore_outline: lernstoreOutline,
-	mdiCustomGridOutline: mdiCustomGridOutline,
-	mdiCustomShelfOutline: MdiCustomShelfOutline,
 	n21: n21,
 	school_outline: schoolOutline,
+	shelfOutline: shelfOutline,
 	taskDoneFilled: taskDoneFilled,
 	taskDone: taskDone,
 	taskDraft: taskDraft,
diff --git a/src/components/icons/custom/MdiCustomShelfOutline.vue b/src/components/icons/custom/shelf-outline.vue
similarity index 100%
rename from src/components/icons/custom/MdiCustomShelfOutline.vue
rename to src/components/icons/custom/shelf-outline.vue
diff --git a/src/components/icons/material/index.ts b/src/components/icons/material/index.ts
index 0c9f8ed527..ea97167935 100644
--- a/src/components/icons/material/index.ts
+++ b/src/components/icons/material/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable schulcloud/material-icon-imports */
 import {
 	mdiAccountBoxOutline,
 	mdiAccountCircleOutline,
@@ -12,12 +13,17 @@ import {
 	mdiAccountSwitchOutline,
 	mdiAlert,
 	mdiAlertCircle,
+	mdiApplicationBracketsOutline,
 	mdiArchiveOutline,
 	mdiArrowCollapse,
 	mdiArrowCollapseDown,
 	mdiArrowCollapseUp,
+	mdiArrowDown,
 	mdiArrowExpand,
-	mdiApplicationBracketsOutline,
+	mdiArrowLeft,
+	mdiArrowRight,
+	mdiArrowUp,
+	mdiBookshelf,
 	mdiCalendar,
 	mdiCalendarOutline,
 	mdiCardAccountDetailsOutline,
@@ -29,27 +35,36 @@ import {
 	mdiCheckboxOutline,
 	mdiCheckCircle,
 	mdiCheckCircleOutline,
+	mdiChevronDown,
 	mdiChevronLeft,
+	mdiChevronRight,
+	mdiChevronUp,
 	mdiCircleOutline,
 	mdiClockOutline,
 	mdiClose,
+	mdiCloseCircle,
+	mdiCloudDownload,
 	mdiCogOutline,
 	mdiContentCopy,
+	mdiContentPaste,
 	mdiContentSave,
+	mdiDelete,
 	mdiDeleteOutline,
 	mdiDnsOutline,
 	mdiDotsVertical,
 	mdiDrag,
 	mdiEmailCheckOutline,
 	mdiEmailOutline,
+	mdiEmailPlusOutline,
 	mdiEmailRemoveOutline,
+	mdiExport,
 	mdiEyeOffOutline,
 	mdiEyeOutline,
 	mdiFileCertificateOutline,
 	mdiFileDocumentOutline,
+	mdiFileQuestionOutline,
 	mdiFileReplaceOutline,
 	mdiFileTreeOutline,
-	mdiFileQuestionOutline,
 	mdiFlag,
 	mdiFlagOutline,
 	mdiFolder,
@@ -67,8 +82,11 @@ import {
 	mdiHeart,
 	mdiHelpCircleOutline,
 	mdiImage,
+	mdiImport,
 	mdiInformation,
+	mdiKeyboardReturn,
 	mdiLightbulbOnOutline,
+	mdiLink,
 	mdiLock,
 	mdiLockOutline,
 	mdiLogin,
@@ -77,29 +95,37 @@ import {
 	mdiMenuDown,
 	mdiMenuDownOutline,
 	mdiMenuOpen,
+	mdiMenuRight,
 	mdiMenuSwapOutline,
 	mdiMenuUpOutline,
 	mdiMinus,
 	mdiNewspaperVariantOutline,
 	mdiOpenInNew,
+	mdiPalette,
+	mdiPause,
 	mdiPencilOutline,
+	mdiPlay,
 	mdiPlaylistEdit,
+	mdiPlaySpeed,
 	mdiPlus,
 	mdiPlusCircleOutline,
+	mdiPound,
 	mdiPresentation,
 	mdiPrinter,
-	mdiPound,
 	mdiPuzzleOutline,
 	mdiQrcode,
 	mdiRedo,
 	mdiRefreshCircle,
 	mdiReload,
 	mdiRenameOutline,
+	mdiRestore,
 	mdiSchoolOutline,
 	mdiShareVariantOutline,
 	mdiShieldAccountVariantOutline,
 	mdiSync,
+	mdiSyncOff,
 	mdiTextBoxCheckOutline,
+	mdiTextBoxEditOutline,
 	mdiTimerSandComplete,
 	mdiTrashCanOutline,
 	mdiTrayArrowDown,
@@ -128,12 +154,17 @@ export {
 	mdiAccountSwitchOutline,
 	mdiAlert,
 	mdiAlertCircle,
+	mdiApplicationBracketsOutline,
 	mdiArchiveOutline,
 	mdiArrowCollapse,
 	mdiArrowCollapseDown,
 	mdiArrowCollapseUp,
+	mdiArrowDown,
 	mdiArrowExpand,
-	mdiApplicationBracketsOutline,
+	mdiArrowLeft,
+	mdiArrowRight,
+	mdiArrowUp,
+	mdiBookshelf,
 	mdiCalendar,
 	mdiCalendarOutline,
 	mdiCardAccountDetailsOutline,
@@ -145,27 +176,36 @@ export {
 	mdiCheckboxOutline,
 	mdiCheckCircle,
 	mdiCheckCircleOutline,
+	mdiChevronDown,
 	mdiChevronLeft,
+	mdiChevronRight,
+	mdiChevronUp,
 	mdiCircleOutline,
 	mdiClockOutline,
 	mdiClose,
+	mdiCloseCircle,
+	mdiCloudDownload,
 	mdiCogOutline,
 	mdiContentCopy,
+	mdiContentPaste,
 	mdiContentSave,
+	mdiDelete,
 	mdiDeleteOutline,
 	mdiDnsOutline,
 	mdiDotsVertical,
 	mdiDrag,
 	mdiEmailCheckOutline,
 	mdiEmailOutline,
+	mdiEmailPlusOutline,
 	mdiEmailRemoveOutline,
+	mdiExport,
 	mdiEyeOffOutline,
 	mdiEyeOutline,
 	mdiFileCertificateOutline,
 	mdiFileDocumentOutline,
+	mdiFileQuestionOutline,
 	mdiFileReplaceOutline,
 	mdiFileTreeOutline,
-	mdiFileQuestionOutline,
 	mdiFlag,
 	mdiFlagOutline,
 	mdiFolder,
@@ -183,8 +223,11 @@ export {
 	mdiHeart,
 	mdiHelpCircleOutline,
 	mdiImage,
+	mdiImport,
 	mdiInformation,
+	mdiKeyboardReturn,
 	mdiLightbulbOnOutline,
+	mdiLink,
 	mdiLock,
 	mdiLockOutline,
 	mdiLogin,
@@ -193,29 +236,37 @@ export {
 	mdiMenuDown,
 	mdiMenuDownOutline,
 	mdiMenuOpen,
+	mdiMenuRight,
 	mdiMenuSwapOutline,
 	mdiMenuUpOutline,
 	mdiMinus,
 	mdiNewspaperVariantOutline,
 	mdiOpenInNew,
+	mdiPalette,
+	mdiPause,
 	mdiPencilOutline,
+	mdiPlay,
 	mdiPlaylistEdit,
+	mdiPlaySpeed,
 	mdiPlus,
 	mdiPlusCircleOutline,
+	mdiPound,
 	mdiPresentation,
 	mdiPrinter,
-	mdiPound,
 	mdiPuzzleOutline,
 	mdiQrcode,
 	mdiRedo,
 	mdiRefreshCircle,
 	mdiReload,
 	mdiRenameOutline,
+	mdiRestore,
 	mdiSchoolOutline,
 	mdiShareVariantOutline,
 	mdiShieldAccountVariantOutline,
 	mdiSync,
+	mdiSyncOff,
 	mdiTextBoxCheckOutline,
+	mdiTextBoxEditOutline,
 	mdiTimerSandComplete,
 	mdiTrashCanOutline,
 	mdiTrayArrowDown,
diff --git a/src/components/legacy/NavigationBar.vue b/src/components/legacy/NavigationBar.vue
index c509852f36..5cd323e246 100644
--- a/src/components/legacy/NavigationBar.vue
+++ b/src/components/legacy/NavigationBar.vue
@@ -41,7 +41,7 @@
 <script>
 import { SchulcloudTheme } from "@/serverApi/v3";
 import { envConfigModule } from "@/store";
-import { mdiLogin } from "@mdi/js";
+import { mdiLogin } from "@icons/material";
 
 export default {
 	props: {
diff --git a/src/components/lern-store/AddContentButton.vue b/src/components/lern-store/AddContentButton.vue
index 6775a5d01a..159992130f 100644
--- a/src/components/lern-store/AddContentButton.vue
+++ b/src/components/lern-store/AddContentButton.vue
@@ -53,7 +53,7 @@ import { contentModule } from "@/store";
 import AddContentModal from "@/components/lern-store/AddContentModal";
 import NotificationModal from "@/components/lern-store/NotificationModal";
 import LoadingModal from "@/components/lern-store/LoadingModal";
-import { mdiPlusCircleOutline } from "@mdi/js";
+import { mdiPlusCircleOutline } from "@icons/material";
 import {
 	getMerlinReference,
 	getMetadataAttribute,
diff --git a/src/components/lern-store/LernstoreCollectionDetailView.vue b/src/components/lern-store/LernstoreCollectionDetailView.vue
index 0be8c733e3..8db9074959 100644
--- a/src/components/lern-store/LernstoreCollectionDetailView.vue
+++ b/src/components/lern-store/LernstoreCollectionDetailView.vue
@@ -9,7 +9,7 @@
 				query: { q: $route.query.q, inline: $route.query.inline },
 			}"
 		>
-			<v-icon class="material-icon">$mdiChevronLeft</v-icon>
+			<v-icon class="material-icon" :icon="mdiChevronLeft" />
 			{{ $t("pages.content.index.backToOverview") }}
 		</base-link>
 		<div class="content">
@@ -41,7 +41,7 @@
 					<div class="metadata">
 						<div v-if="createdAt || updatedAt" class="meta-container">
 							<div class="meta-icon">
-								<v-icon class="material-icon">$mdiCalendar</v-icon>
+								<v-icon class="material-icon" :icon="mdiCalendar" />
 							</div>
 							<div class="meta-text">
 								<div v-if="createdAt">
@@ -56,7 +56,7 @@
 						</div>
 						<div :style="{ margin: '0px' }" class="meta-container">
 							<div>
-								<v-icon class="material-icon meta-icon">$mdiPound</v-icon>
+								<v-icon class="material-icon meta-icon" :icon="mdiPound" />
 							</div>
 							<template v-if="tags.length > 0">
 								<div class="text-wrap">
@@ -144,6 +144,7 @@ import UserHasRole from "@/components/helpers/UserHasRole";
 import BaseLink from "../base/BaseLink";
 import { RenderHTML } from "@feature-render-html";
 import { buildPageTitle } from "@/utils/pageTitle";
+import { mdiCalendar, mdiChevronLeft, mdiPound } from "@icons/material";
 
 const DEFAULT_AUTHOR = "admin";
 
@@ -168,6 +169,9 @@ export default defineComponent({
 		return {
 			checkedMaterials: [],
 			btnLabel: `${this.$t("pages.content._id.addToTopic")}`,
+			mdiCalendar,
+			mdiChevronLeft,
+			mdiPound,
 		};
 	},
 	computed: {
diff --git a/src/components/lern-store/LernstoreDetailView.vue b/src/components/lern-store/LernstoreDetailView.vue
index d6731a1453..52c6a832cb 100644
--- a/src/components/lern-store/LernstoreDetailView.vue
+++ b/src/components/lern-store/LernstoreDetailView.vue
@@ -110,7 +110,7 @@
 				<div class="metadata">
 					<div v-if="createdAt || updatedAt" class="meta-container">
 						<div class="meta-icon">
-							<v-icon class="material-icon">$mdiCalendar</v-icon>
+							<v-icon class="material-icon" :icon="mdiCalendar" />
 						</div>
 						<div class="meta-text">
 							<div v-if="createdAt">
@@ -125,7 +125,7 @@
 					</div>
 					<div class="meta-container">
 						<div>
-							<v-icon class="material-icon meta-icon">$mdiPound</v-icon>
+							<v-icon class="material-icon meta-icon" :icon="mdiPound" />
 						</div>
 						<template v-if="tags.length > 0">
 							<div class="text-wrap">
@@ -194,7 +194,7 @@ import {
 } from "@/utils/helpers";
 import { buildPageTitle } from "@/utils/pageTitle";
 import { RenderHTML } from "@feature-render-html";
-import { mdiClose, mdiOpenInNew } from "@mdi/js";
+import { mdiCalendar, mdiClose, mdiOpenInNew, mdiPound } from "@icons/material";
 import BaseLink from "../base/BaseLink";
 
 const DEFAULT_AUTHOR = "admin";
@@ -219,7 +219,9 @@ export default {
 	},
 	data() {
 		return {
+			mdiCalendar,
 			mdiClose,
+			mdiPound,
 			mdiOpenInNew,
 			windowWidth: window.outerWidth,
 			window: {
diff --git a/src/components/lern-store/NotificationModal.unit.ts b/src/components/lern-store/NotificationModal.unit.ts
index 097baba76f..864b31c99e 100644
--- a/src/components/lern-store/NotificationModal.unit.ts
+++ b/src/components/lern-store/NotificationModal.unit.ts
@@ -4,7 +4,7 @@ import {
 } from "@@/tests/test-utils/setup";
 import { mount } from "@vue/test-utils";
 import NotificationModal from "./NotificationModal.vue";
-import { mdiAlertCircle, mdiCheckCircle } from "@/components/icons/material";
+import { mdiAlertCircle, mdiCheckCircle } from "@icons/material";
 
 const testProps = {
 	showNotificationModal: true,
diff --git a/src/components/lern-store/NotificationModal.vue b/src/components/lern-store/NotificationModal.vue
index 2fc65398c1..0603fc5c2c 100644
--- a/src/components/lern-store/NotificationModal.vue
+++ b/src/components/lern-store/NotificationModal.vue
@@ -3,10 +3,10 @@
 		<template #body>
 			<modal-body-info :title="msg" :description="description">
 				<template v-if="isSuccess" #icon>
-					<v-icon size="60" color="success">$mdiCheckCircle</v-icon>
+					<v-icon size="60" color="success" :icon="mdiCheckCircle" />
 				</template>
 				<template v-else #icon>
-					<v-icon size="60" color="error">$mdiAlertCircle</v-icon>
+					<v-icon size="60" color="error" :icon="mdiAlertCircle" />
 				</template>
 			</modal-body-info>
 		</template>
@@ -24,6 +24,7 @@
 import BaseModal from "../base/BaseModal";
 import ModalBodyInfo from "@/components/molecules/ModalBodyInfo";
 import ModalFooterConfirm from "@/components/molecules/ModalFooterConfirm";
+import { mdiAlertCircle, mdiCheckCircle } from "@icons/material";
 export default {
 	name: "NotificationModal",
 	components: {
@@ -52,6 +53,12 @@ export default {
 			type: Boolean,
 		},
 	},
+	data() {
+		return {
+			mdiAlertCircle,
+			mdiCheckCircle,
+		};
+	},
 	computed: {
 		msg: {
 			get() {
diff --git a/src/components/molecules/Alert.unit.ts b/src/components/molecules/Alert.unit.ts
index 6115da6171..209bcb166d 100644
--- a/src/components/molecules/Alert.unit.ts
+++ b/src/components/molecules/Alert.unit.ts
@@ -5,7 +5,7 @@ import {
 } from "@@/tests/test-utils/setup";
 import { mount } from "@vue/test-utils";
 import Alert from "./Alert.vue";
-import { mdiCheckCircle } from "@/components/icons/material";
+import { mdiCheckCircle } from "@icons/material";
 import { VAlert, VIcon } from "vuetify/lib/components/index.mjs";
 
 const getWrapper = (props?: AlertPayload) => {
diff --git a/src/components/molecules/Alert.vue b/src/components/molecules/Alert.vue
index a595861878..97d37fea96 100644
--- a/src/components/molecules/Alert.vue
+++ b/src/components/molecules/Alert.vue
@@ -24,7 +24,7 @@ import {
 	mdiAlertCircle,
 	mdiCheckCircle,
 	mdiInformation,
-} from "@/components/icons/material";
+} from "@icons/material";
 import { computed, PropType, Ref, ref } from "vue";
 
 const props = defineProps({
diff --git a/src/components/molecules/CommonCartridgeExportModal.vue b/src/components/molecules/CommonCartridgeExportModal.vue
index 43c3b9ac75..3d9ec14906 100644
--- a/src/components/molecules/CommonCartridgeExportModal.vue
+++ b/src/components/molecules/CommonCartridgeExportModal.vue
@@ -166,7 +166,7 @@ import {
 	NOTIFIER_MODULE_KEY,
 	COURSE_ROOM_DETAILS_MODULE_KEY,
 } from "@/utils/inject";
-import { mdiInformation } from "@mdi/js";
+import { mdiInformation } from "@icons/material";
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
diff --git a/src/components/molecules/CommonCartridgeImportModal.vue b/src/components/molecules/CommonCartridgeImportModal.vue
index 86f8a57655..c2da061268 100644
--- a/src/components/molecules/CommonCartridgeImportModal.vue
+++ b/src/components/molecules/CommonCartridgeImportModal.vue
@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 import { computed, withDefaults } from "vue";
-import { mdiTrayArrowUp } from "@mdi/js";
+import { mdiTrayArrowUp } from "@icons/material";
 import { useI18n } from "vue-i18n";
 import {
 	COMMON_CARTRIDGE_IMPORT_MODULE_KEY,
diff --git a/src/components/molecules/RoomModal.vue b/src/components/molecules/RoomModal.vue
index ee04b4ac8e..1a5fdc6c98 100644
--- a/src/components/molecules/RoomModal.vue
+++ b/src/components/molecules/RoomModal.vue
@@ -36,7 +36,7 @@
 import RoomAvatarIterator from "@/components/organisms/RoomAvatarIterator.vue";
 import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
 import { courseRoomListModule } from "@/store";
-import { mdiKeyboardReturn, mdiPencilOutline } from "@mdi/js";
+import { mdiKeyboardReturn, mdiPencilOutline } from "@icons/material";
 import { defineComponent } from "vue";
 
 export default defineComponent({
diff --git a/src/components/molecules/RoomTaskCard.vue b/src/components/molecules/RoomTaskCard.vue
index 00b47b1943..8cdaff707d 100644
--- a/src/components/molecules/RoomTaskCard.vue
+++ b/src/components/molecules/RoomTaskCard.vue
@@ -109,7 +109,7 @@ import {
 	mdiTextBoxCheckOutline,
 	mdiTrashCanOutline,
 	mdiUndoVariant,
-} from "@mdi/js";
+} from "@icons/material";
 import { RoomDotMenu } from "@ui-room-details";
 
 const taskRequiredKeys = ["createdAt", "id", "name"];
diff --git a/src/components/molecules/TaskItemMenu.vue b/src/components/molecules/TaskItemMenu.vue
index 7547869efc..8db03629cf 100644
--- a/src/components/molecules/TaskItemMenu.vue
+++ b/src/components/molecules/TaskItemMenu.vue
@@ -135,7 +135,7 @@ import {
 	mdiShareVariantOutline,
 	mdiTrashCanOutline,
 	mdiUndoVariant,
-} from "@mdi/js";
+} from "@icons/material";
 import { defineComponent } from "vue";
 
 export default defineComponent({
diff --git a/src/components/molecules/vImportUsersMatchSearch.unit.ts b/src/components/molecules/vImportUsersMatchSearch.unit.ts
index 038981a81a..42dc9faba4 100644
--- a/src/components/molecules/vImportUsersMatchSearch.unit.ts
+++ b/src/components/molecules/vImportUsersMatchSearch.unit.ts
@@ -7,7 +7,7 @@ import {
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
 import setupStores from "@@/tests/test-utils/setupStores";
-import { mdiFlag, mdiFlagOutline } from "@mdi/js";
+import { mdiFlag, mdiFlagOutline } from "@icons/material";
 import { mount } from "@vue/test-utils";
 import { nextTick } from "vue";
 import { ComponentProps } from "vue-component-type-helpers";
diff --git a/src/components/molecules/vImportUsersMatchSearch.vue b/src/components/molecules/vImportUsersMatchSearch.vue
index e8dad88f0c..2f2461ca56 100644
--- a/src/components/molecules/vImportUsersMatchSearch.vue
+++ b/src/components/molecules/vImportUsersMatchSearch.vue
@@ -211,7 +211,7 @@ import {
 	mdiDelete,
 	mdiFlag,
 	mdiFlagOutline,
-} from "@mdi/js";
+} from "@icons/material";
 import { useDebounceFn } from "@vueuse/core";
 import {
 	computed,
diff --git a/src/components/molecules/vRoomGroupAvatar.vue b/src/components/molecules/vRoomGroupAvatar.vue
index 1998c6ba6a..dcfec80c86 100644
--- a/src/components/molecules/vRoomGroupAvatar.vue
+++ b/src/components/molecules/vRoomGroupAvatar.vue
@@ -13,7 +13,7 @@
 			class="badge-component avatar-badge"
 			bordered
 			color="rgba(var(--v-theme-primary)"
-			icon="$mdiLock"
+			:icon="mdiLock"
 			:model-value="hasNotifications"
 		>
 			<v-card
@@ -54,6 +54,8 @@
 
 <script>
 import RoomAvatarIterator from "@/components/organisms/RoomAvatarIterator.vue";
+import { mdiLock } from "@icons/material";
+
 export default {
 	components: {
 		RoomAvatarIterator,
@@ -83,6 +85,7 @@ export default {
 		return {
 			hovered: false,
 			isDragging: false,
+			mdiLock,
 		};
 	},
 	computed: {
diff --git a/src/components/organisms/DataFilter/DataFilter.vue b/src/components/organisms/DataFilter/DataFilter.vue
index 9fd407d314..d0f3492a9e 100644
--- a/src/components/organisms/DataFilter/DataFilter.vue
+++ b/src/components/organisms/DataFilter/DataFilter.vue
@@ -2,9 +2,9 @@
 	<v-menu>
 		<template v-slot:activator="{ props }">
 			<v-btn v-bind="props" variant="flat">
-				<v-icon class="filter-icon mr-2">$mdiTune</v-icon>
+				<v-icon class="filter-icon mr-2" :icon="mdiTune" />
 				<span data-testid="filter-title">{{ filterTitle }}</span>
-				<v-icon class="filter-icon">$mdiMenuDown</v-icon>
+				<v-icon class="filter-icon" :icon="mdiMenuDown" />
 			</v-btn>
 		</template>
 
@@ -64,8 +64,8 @@ import {
 } from "./types";
 import { ref, computed, PropType } from "vue";
 import { useDataTableFilter } from "./composables/filter.composable";
-
 import { useI18n } from "vue-i18n";
+import { mdiMenuDown, mdiTune } from "@icons/material";
 
 const props = defineProps({
 	filterFor: {
diff --git a/src/components/organisms/DataFilter/filterComponents/FilterChips.vue b/src/components/organisms/DataFilter/filterComponents/FilterChips.vue
index ce8e9fbdf4..e60d78539f 100644
--- a/src/components/organisms/DataFilter/filterComponents/FilterChips.vue
+++ b/src/components/organisms/DataFilter/filterComponents/FilterChips.vue
@@ -17,7 +17,7 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { mdiCloseCircle } from "@mdi/js";
+import { mdiCloseCircle } from "@icons/material";
 import { ChipTitle } from "@/components/organisms/DataFilter/types";
 
 defineProps({
diff --git a/src/components/organisms/DataTable/BackendDataTable.unit.js b/src/components/organisms/DataTable/BackendDataTable.unit.js
index a73b5d3560..48cb4910d3 100644
--- a/src/components/organisms/DataTable/BackendDataTable.unit.js
+++ b/src/components/organisms/DataTable/BackendDataTable.unit.js
@@ -12,7 +12,7 @@ import {
 	mdiCheckboxOutline,
 	mdiMenuDownOutline,
 	mdiMenuUpOutline,
-} from "@/components/icons/material";
+} from "@icons/material";
 
 const defaultData = tableData(5);
 
diff --git a/src/components/organisms/DataTable/RowSelectionBar.vue b/src/components/organisms/DataTable/RowSelectionBar.vue
index e45468cb04..74f2a2c80e 100644
--- a/src/components/organisms/DataTable/RowSelectionBar.vue
+++ b/src/components/organisms/DataTable/RowSelectionBar.vue
@@ -46,7 +46,7 @@
 
 <script>
 import ContextMenu from "@/components/molecules/ContextMenu";
-import { mdiClose } from "@mdi/js";
+import { mdiClose } from "@icons/material";
 
 export default {
 	components: {
diff --git a/src/components/organisms/DataTable/TableHeadRow.vue b/src/components/organisms/DataTable/TableHeadRow.vue
index c34bd01358..8fa026680a 100644
--- a/src/components/organisms/DataTable/TableHeadRow.vue
+++ b/src/components/organisms/DataTable/TableHeadRow.vue
@@ -63,7 +63,7 @@
 								}}
 								<br />
 								<br />
-								<v-icon color="rgba(var(--v-theme-error))">$mdiAlert</v-icon>
+								<v-icon color="rgba(var(--v-theme-error))" :icon="mdiAlert" />
 								{{
 									$t("pages.administration.students.infobox.LDAP.paragraph-3")
 								}}
@@ -124,7 +124,7 @@
 								{{ $t("pages.administration.students.infobox.paragraph-3") }}
 								<br />
 								<br />
-								<v-icon color="rgba(var(--v-theme-error))">$mdiAlert</v-icon>
+								<v-icon color="rgba(var(--v-theme-error))" :icon="mdiAlert" />
 								{{ $t("pages.administration.students.infobox.paragraph-4") }}
 							</div>
 						</template>
@@ -213,11 +213,9 @@
 						}}</span>
 					</div>
 					<v-icon v-if="sortBy === column.field">
-						{{
-							sortOrder === "asc" ? "$mdiMenuUpOutline" : "$mdiMenuDownOutline"
-						}}
+						{{ sortOrder === "asc" ? mdiMenuUpOutline : mdiMenuDownOutline }}
 					</v-icon>
-					<v-icon v-else-if="column.sortable">$mdiMenuSwapOutline </v-icon>
+					<v-icon v-else-if="column.sortable" :icon="mdiMenuSwapOutline" />
 				</v-btn>
 				<div v-else class="th-wrap">
 					<span>{{ column.label }}</span>
@@ -230,7 +228,13 @@
 <script>
 import InfoBox from "@/components/molecules/InfoBox";
 import { envConfigModule } from "@/store";
-import { mdiInformation } from "@mdi/js";
+import {
+	mdiAlert,
+	mdiInformation,
+	mdiMenuDownOutline,
+	mdiMenuSwapOutline,
+	mdiMenuUpOutline,
+} from "@icons/material";
 
 const selectionStateMap = new Map([
 	[true, "all"],
@@ -272,7 +276,11 @@ export default {
 	data() {
 		return {
 			infoBoxActive: false,
+			mdiAlert,
+			mdiMenuDownOutline,
 			mdiInformation,
+			mdiMenuSwapOutline,
+			mdiMenuUpOutline,
 		};
 	},
 	computed: {
diff --git a/src/components/organisms/Ldap/LdapClassesSection.vue b/src/components/organisms/Ldap/LdapClassesSection.vue
index 42de5fcaac..c51c7744b4 100644
--- a/src/components/organisms/Ldap/LdapClassesSection.vue
+++ b/src/components/organisms/Ldap/LdapClassesSection.vue
@@ -28,7 +28,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiFileTreeOutline</v-icon>
+				<v-icon :icon="mdiFileTreeOutline" />
 			</template>
 		</base-input>
 		<p class="title-class">
@@ -70,7 +70,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiAccountGroupOutline</v-icon>
+				<v-icon :icon="mdiAccountGroupOutline" />
 			</template>
 		</base-input>
 	</div>
@@ -81,7 +81,11 @@ import { required } from "@vuelidate/validators";
 import { ldapPathRegexValidator } from "@/utils/ldapConstants";
 import { defineComponent } from "vue";
 import useVuelidate from "@vuelidate/core";
-import { mdiCheck } from "@mdi/js";
+import {
+	mdiAccountGroupOutline,
+	mdiCheck,
+	mdiFileTreeOutline,
+} from "@icons/material";
 
 export default defineComponent({
 	setup() {
@@ -111,7 +115,9 @@ export default defineComponent({
 				},
 				{ key: "required", message: this.$t("common.validation.required") },
 			],
+			mdiAccountGroupOutline,
 			mdiCheck,
+			mdiFileTreeOutline,
 		};
 	},
 	computed: {
diff --git a/src/components/organisms/Ldap/LdapConnectionSection.vue b/src/components/organisms/Ldap/LdapConnectionSection.vue
index d2aaea1354..ccf031dd4a 100644
--- a/src/components/organisms/Ldap/LdapConnectionSection.vue
+++ b/src/components/organisms/Ldap/LdapConnectionSection.vue
@@ -19,7 +19,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiDnsOutline</v-icon>
+				<v-icon :icon="mdiDnsOutline" />
 			</template>
 		</base-input>
 		<base-input
@@ -37,7 +37,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiFileTreeOutline</v-icon>
+				<v-icon :icon="mdiFileTreeOutline" />
 			</template>
 		</base-input>
 		<base-input
@@ -55,7 +55,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiAccountCircleOutline</v-icon>
+				<v-icon :icon="mdiAccountCircleOutline" />
 			</template>
 		</base-input>
 		<base-input
@@ -76,7 +76,7 @@
 				})
 			"
 			><template #icon>
-				<v-icon>$mdiLockOutline</v-icon>
+				<v-icon :icon="mdiLockOutline" />
 			</template>
 		</base-input>
 	</div>
@@ -91,6 +91,12 @@ import {
 } from "@/utils/ldapConstants";
 import { defineComponent } from "vue";
 import useVuelidate from "@vuelidate/core";
+import {
+	mdiAccountCircleOutline,
+	mdiDnsOutline,
+	mdiFileTreeOutline,
+	mdiLockOutline,
+} from "@icons/material";
 
 export default defineComponent({
 	setup() {
@@ -109,6 +115,10 @@ export default defineComponent({
 	},
 	data() {
 		return {
+			mdiAccountCircleOutline,
+			mdiDnsOutline,
+			mdiFileTreeOutline,
+			mdiLockOutline,
 			pathSearchValidationMessages: [
 				{ key: "required", message: this.$t("common.validation.required") },
 				{
diff --git a/src/components/organisms/Ldap/LdapRolesSection.vue b/src/components/organisms/Ldap/LdapRolesSection.vue
index e9b987f160..025be5f9a9 100644
--- a/src/components/organisms/Ldap/LdapRolesSection.vue
+++ b/src/components/organisms/Ldap/LdapRolesSection.vue
@@ -51,7 +51,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiAccountOutline</v-icon>
+				<v-icon :icon="mdiAccountOutline" />
 			</template>
 		</base-input>
 		<base-input
@@ -71,7 +71,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiAccountSchoolOutline</v-icon>
+				<v-icon :icon="mdiAccountSchoolOutline" />
 			</template>
 		</base-input>
 		<base-input
@@ -107,7 +107,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiShieldAccountVariantOutline</v-icon>
+				<v-icon :icon="mdiShieldAccountVariantOutline" />
 			</template>
 		</base-input>
 		<base-input
@@ -122,7 +122,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiAccountOffOutline</v-icon>
+				<v-icon :icon="mdiAccountOffOutline" />
 			</template>
 		</base-input>
 	</div>
@@ -133,6 +133,12 @@ import { required } from "@vuelidate/validators";
 import { ldapPathRegexValidator } from "@/utils/ldapConstants";
 import { defineComponent } from "vue";
 import useVuelidate from "@vuelidate/core";
+import {
+	mdiAccountOffOutline,
+	mdiAccountOutline,
+	mdiAccountSchoolOutline,
+	mdiShieldAccountVariantOutline,
+} from "@icons/material";
 
 export default defineComponent({
 	setup() {
@@ -153,6 +159,10 @@ export default defineComponent({
 	},
 	data() {
 		return {
+			mdiAccountOffOutline,
+			mdiAccountOutline,
+			mdiAccountSchoolOutline,
+			mdiShieldAccountVariantOutline,
 			memberValidationMessages: [
 				{ key: "required", message: this.$t("common.validation.required") },
 			],
diff --git a/src/components/organisms/Ldap/LdapUsersSection.vue b/src/components/organisms/Ldap/LdapUsersSection.vue
index d1e8cf1751..17ea66d440 100644
--- a/src/components/organisms/Ldap/LdapUsersSection.vue
+++ b/src/components/organisms/Ldap/LdapUsersSection.vue
@@ -23,7 +23,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiFileTreeOutline</v-icon>
+				<v-icon :icon="mdiFileTreeOutline" />
 			</template>
 		</base-input>
 		<p class="path-hint">
@@ -43,7 +43,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon :color="fillColor">$mdiAccountCircleOutline</v-icon>
+				<v-icon :color="fillColor" :icon="mdiAccountCircleOutline" />
 			</template>
 		</base-input>
 		<base-input
@@ -60,7 +60,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiAccountCircleOutline</v-icon>
+				<v-icon :icon="mdiAccountCircleOutline" />
 			</template>
 		</base-input>
 		<base-input
@@ -77,7 +77,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiEmailOutline</v-icon>
+				<v-icon :icon="mdiEmailOutline" />
 			</template>
 		</base-input>
 		<base-input
@@ -95,7 +95,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiCardAccountDetailsOutline</v-icon>
+				<v-icon :icon="mdiCardAccountDetailsOutline" />
 			</template>
 		</base-input>
 		<base-input
@@ -113,7 +113,7 @@
 			"
 		>
 			<template #icon>
-				<v-icon>$mdiAccountBoxOutline</v-icon>
+				<v-icon :icon="mdiAccountBoxOutline" />
 			</template>
 		</base-input>
 	</div>
@@ -124,6 +124,13 @@ import { required } from "@vuelidate/validators";
 import { ldapPathRegexValidator } from "@/utils/ldapConstants";
 import { defineComponent } from "vue";
 import useVuelidate from "@vuelidate/core";
+import {
+	mdiAccountBoxOutline,
+	mdiAccountCircleOutline,
+	mdiCardAccountDetailsOutline,
+	mdiEmailOutline,
+	mdiFileTreeOutline,
+} from "@icons/material";
 
 export default defineComponent({
 	setup() {
@@ -142,6 +149,11 @@ export default defineComponent({
 	},
 	data() {
 		return {
+			mdiAccountBoxOutline,
+			mdiAccountCircleOutline,
+			mdiCardAccountDetailsOutline,
+			mdiEmailOutline,
+			mdiFileTreeOutline,
 			usersValidationMessage: [
 				{ key: "required", message: this.$t("common.validation.required") },
 			],
diff --git a/src/components/organisms/Pagination.vue b/src/components/organisms/Pagination.vue
index 547e9de6a8..1815a31f74 100644
--- a/src/components/organisms/Pagination.vue
+++ b/src/components/organisms/Pagination.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
+import { mdiChevronLeft, mdiChevronRight } from "@icons/material";
 export default {
 	props: {
 		currentPage: {
diff --git a/src/components/organisms/StepProgress.vue b/src/components/organisms/StepProgress.vue
index dac6235e9a..15dfc7f510 100644
--- a/src/components/organisms/StepProgress.vue
+++ b/src/components/organisms/StepProgress.vue
@@ -12,7 +12,7 @@
 			>
 				<span class="description">{{ s.name }} </span>
 				<span v-show="index < currentStep">
-					<v-icon class="material-icon">$mdiCheck</v-icon>
+					<v-icon class="material-icon" :icon="mdiCheck" />
 				</span>
 			</li>
 		</ul>
@@ -20,6 +20,8 @@
 </template>
 
 <script>
+import { mdiCheck } from "@icons/material";
+
 export default {
 	components: {},
 	props: {
@@ -46,8 +48,9 @@ export default {
 		},
 	},
 	data() {
-		// This solely exists to appear in the coverage report
-		return {};
+		return {
+			mdiCheck,
+		};
 	},
 	computed: {
 		stepWidth: function () {
diff --git a/src/components/organisms/administration/AuthSystems.vue b/src/components/organisms/administration/AuthSystems.vue
index 08dd7eedd3..025f4fca9e 100644
--- a/src/components/organisms/administration/AuthSystems.vue
+++ b/src/components/organisms/administration/AuthSystems.vue
@@ -154,7 +154,7 @@ import {
 	mdiContentCopy,
 	mdiPencilOutline,
 	mdiTrashCanOutline,
-} from "@mdi/js";
+} from "@icons/material";
 
 export default {
 	components: {
diff --git a/src/components/organisms/administration/ImportUsers.vue b/src/components/organisms/administration/ImportUsers.vue
index 0d2b76930c..75ba31c881 100644
--- a/src/components/organisms/administration/ImportUsers.vue
+++ b/src/components/organisms/administration/ImportUsers.vue
@@ -279,7 +279,7 @@ import {
 	mdiFlag,
 	mdiFlagOutline,
 	mdiPencilOutline,
-} from "@/components/icons/material";
+} from "@icons/material";
 import vImportUsersMatchSearch from "@/components/molecules/vImportUsersMatchSearch";
 import {
 	ImportUserResponseRoleNamesEnum,
diff --git a/src/components/organisms/administration/PrivacySettings.vue b/src/components/organisms/administration/PrivacySettings.vue
index 1fdc343158..12c2f9d4a2 100644
--- a/src/components/organisms/administration/PrivacySettings.vue
+++ b/src/components/organisms/administration/PrivacySettings.vue
@@ -163,7 +163,7 @@
 <script setup lang="ts">
 import { SchulcloudTheme } from "@/serverApi/v3";
 import { envConfigModule } from "@/store";
-import { mdiCheck } from "@mdi/js";
+import { mdiCheck } from "@icons/material";
 import { computed } from "vue";
 
 const props = defineProps({
diff --git a/src/components/organisms/administration/SchoolPolicy.vue b/src/components/organisms/administration/SchoolPolicy.vue
index 081f3b4e96..064f183bbd 100644
--- a/src/components/organisms/administration/SchoolPolicy.vue
+++ b/src/components/organisms/administration/SchoolPolicy.vue
@@ -57,14 +57,12 @@
 						@click.stop="isSchoolPolicyFormDialogOpen = true"
 					>
 						<v-btn
-							icon
+							:icon="mdiTrayArrowUp"
 							variant="text"
 							:aria-label="
 								$t('pages.administration.school.index.schoolPolicy.edit')
 							"
-						>
-							<v-icon>$mdiTrayArrowUp</v-icon>
-						</v-btn>
+						/>
 					</v-list-item-action>
 					<v-list-item-action
 						v-if="privacyPolicy"
@@ -72,16 +70,14 @@
 						@click.stop="isDeletePolicyDialogOpen = true"
 					>
 						<v-btn
-							icon
+							:icon="mdiTrashCanOutline"
 							variant="text"
 							:aria-label="
 								$t(
 									'pages.administration.school.index.schoolPolicy.delete.title'
 								)
 							"
-						>
-							<v-icon>$mdiTrashCanOutline</v-icon>
-						</v-btn>
+						/>
 					</v-list-item-action>
 				</template>
 			</v-list-item>
@@ -96,7 +92,7 @@
 				:size="430"
 				has-buttons
 				confirm-btn-title-key="common.actions.delete"
-				confirm-btn-icon="$mdiTrashCanOutline"
+				:confirm-btn-icon="mdiTrashCanOutline"
 				@dialog-confirmed="deleteFile"
 				data-testid="delete-dialog"
 			>
@@ -138,7 +134,11 @@ import {
 import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
 import { downloadFile } from "@/utils/fileHelper";
 import { formatDateForAlerts } from "@/plugins/datetime";
-import { mdiAlertCircle } from "@/components/icons/material";
+import {
+	mdiAlertCircle,
+	mdiTrashCanOutline,
+	mdiTrayArrowUp,
+} from "@icons/material";
 
 export default defineComponent({
 	name: "SchoolPolicy",
@@ -218,6 +218,8 @@ export default defineComponent({
 			formatDate,
 			closeDialog,
 			mdiAlertCircle,
+			mdiTrashCanOutline,
+			mdiTrayArrowUp,
 		};
 	},
 });
diff --git a/src/components/organisms/administration/SchoolPolicyFormDialog.vue b/src/components/organisms/administration/SchoolPolicyFormDialog.vue
index c6fb7c4a46..b9cad8855a 100644
--- a/src/components/organisms/administration/SchoolPolicyFormDialog.vue
+++ b/src/components/organisms/administration/SchoolPolicyFormDialog.vue
@@ -5,7 +5,7 @@
 		@dialog-closed="cancel"
 		has-buttons
 		confirm-btn-title-key="pages.administration.school.index.schoolPolicy.replace"
-		confirm-btn-icon="$mdiFileReplaceOutline"
+		:confirm-btn-icon="mdiFileReplaceOutline"
 		:confirm-btn-disabled="!isValid"
 		@dialog-confirmed="submit"
 	>
@@ -69,7 +69,7 @@ import {
 	SCHOOLS_MODULE_KEY,
 } from "@/utils/inject";
 import { useI18n } from "vue-i18n";
-import { mdiAlert, mdiFileReplaceOutline } from "@mdi/js";
+import { mdiAlert, mdiFileReplaceOutline } from "@icons/material";
 import { School } from "@/store/types/schools";
 import { currentDate } from "@/plugins/datetime";
 import { toBase64 } from "@/utils/fileHelper";
diff --git a/src/components/organisms/administration/SchoolTerms.vue b/src/components/organisms/administration/SchoolTerms.vue
index 56f07e32ac..50fe0b4bfc 100644
--- a/src/components/organisms/administration/SchoolTerms.vue
+++ b/src/components/organisms/administration/SchoolTerms.vue
@@ -55,14 +55,12 @@
 						@click.stop="isSchoolTermsFormDialogOpen = true"
 					>
 						<v-btn
-							icon
+							:icon="mdiTrayArrowUp"
 							variant="text"
 							:aria-label="
 								t('pages.administration.school.index.termsOfUse.edit')
 							"
-						>
-							<v-icon>$mdiTrayArrowUp</v-icon>
-						</v-btn>
+						/>
 					</v-list-item-action>
 					<v-list-item-action
 						v-if="termsOfUse"
@@ -70,14 +68,12 @@
 						@click.stop="isDeleteTermsDialogOpen = true"
 					>
 						<v-btn
-							icon
+							:icon="mdiTrashCanOutline"
 							variant="text"
 							:aria-label="
 								t('pages.administration.school.index.termsOfUse.delete.title')
 							"
-						>
-							<v-icon>$mdiTrashCanOutline</v-icon>
-						</v-btn>
+						/>
 					</v-list-item-action>
 				</template>
 			</v-list-item>
@@ -92,7 +88,7 @@
 				:size="430"
 				has-buttons
 				confirm-btn-title-key="common.actions.delete"
-				confirm-btn-icon="$mdiTrashCanOutline"
+				:confirm-btn-icon="mdiTrashCanOutline"
 				@dialog-confirmed="deleteFile"
 				data-testid="delete-dialog"
 			>
@@ -132,7 +128,11 @@ import {
 import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
 import { downloadFile } from "@/utils/fileHelper";
 import { formatDateForAlerts } from "@/plugins/datetime";
-import { mdiAlertCircle } from "@/components/icons/material";
+import {
+	mdiAlertCircle,
+	mdiTrashCanOutline,
+	mdiTrayArrowUp,
+} from "@icons/material";
 
 export default defineComponent({
 	name: "SchoolTerms",
@@ -211,6 +211,8 @@ export default defineComponent({
 			formatDate,
 			closeDialog,
 			mdiAlertCircle,
+			mdiTrashCanOutline,
+			mdiTrayArrowUp,
 		};
 	},
 });
diff --git a/src/components/organisms/administration/SchoolTermsFormDialog.vue b/src/components/organisms/administration/SchoolTermsFormDialog.vue
index 2d7eedc5f4..19f577d181 100644
--- a/src/components/organisms/administration/SchoolTermsFormDialog.vue
+++ b/src/components/organisms/administration/SchoolTermsFormDialog.vue
@@ -5,7 +5,7 @@
 		@dialog-closed="cancel"
 		has-buttons
 		confirm-btn-title-key="pages.administration.school.index.termsOfUse.replace"
-		confirm-btn-icon="$mdiFileReplaceOutline"
+		:confirm-btn-icon="mdiFileReplaceOutline"
 		:confirm-btn-disabled="!isValid"
 		@dialog-confirmed="submit"
 	>
@@ -16,7 +16,7 @@
 		</template>
 		<template #content>
 			<v-form ref="termsForm" v-model="isValid">
-				<v-alert type="warning" class="mb-10" icon="$mdiAlert">
+				<v-alert type="warning" class="mb-10" :icon="mdiAlert">
 					<div class="alert-text">
 						{{
 							t(
@@ -49,8 +49,8 @@
 							v-if="!isValid && isTouched"
 							color="rgba(var(--v-theme-error))"
 							data-testid="warning-icon"
-							>$mdiAlert</v-icon
-						>
+							:icon="mdiAlert"
+						/>
 					</template>
 				</v-file-input>
 			</v-form>
@@ -72,6 +72,7 @@ import { currentDate } from "@/plugins/datetime";
 import { toBase64 } from "@/utils/fileHelper";
 import { CreateConsentVersionPayload } from "@/store/types/consent-version";
 import { useI18n } from "vue-i18n";
+import { mdiAlert, mdiFileReplaceOutline } from "@icons/material";
 
 export default defineComponent({
 	name: "SchoolTermsFormDialog",
@@ -161,6 +162,8 @@ export default defineComponent({
 			isTouched: isFormTouched,
 			termsForm,
 			school,
+			mdiAlert,
+			mdiFileReplaceOutline,
 		};
 	},
 });
diff --git a/src/components/rooms/RoomBaseCard.vue b/src/components/rooms/RoomBaseCard.vue
index 518bc77c36..f4b2bed65c 100644
--- a/src/components/rooms/RoomBaseCard.vue
+++ b/src/components/rooms/RoomBaseCard.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import { mdiOpenInNew } from "@mdi/js";
+import { mdiOpenInNew } from "@icons/material";
 import { defineComponent } from "vue";
 
 export default defineComponent({
diff --git a/src/components/rooms/RoomExternalToolCard.vue b/src/components/rooms/RoomExternalToolCard.vue
index 816f06c37e..b73ed359e6 100644
--- a/src/components/rooms/RoomExternalToolCard.vue
+++ b/src/components/rooms/RoomExternalToolCard.vue
@@ -54,7 +54,7 @@ import {
 	useContextExternalToolConfigurationStatus,
 	useExternalToolLaunchState,
 } from "@data-external-tool";
-import { mdiPencilOutline, mdiTrashCanOutline } from "@mdi/js";
+import { mdiPencilOutline, mdiTrashCanOutline } from "@icons/material";
 import { InfoChip, WarningChip } from "@ui-chip";
 import { RoomDotMenu } from "@ui-room-details";
 import { computed, ComputedRef, PropType, watch } from "vue";
diff --git a/src/components/rooms/RoomVideoConferenceCard.vue b/src/components/rooms/RoomVideoConferenceCard.vue
index ad78f8d320..85d8b62184 100644
--- a/src/components/rooms/RoomVideoConferenceCard.vue
+++ b/src/components/rooms/RoomVideoConferenceCard.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import { mdiReload } from "@mdi/js";
+import { mdiReload } from "@icons/material";
 import { computed, ComputedRef, defineComponent } from "vue";
 import RoomBaseCard from "./RoomBaseCard.vue";
 import { useI18n } from "vue-i18n";
diff --git a/src/components/share/ImportModal.vue b/src/components/share/ImportModal.vue
index 2b943453c9..085807f37c 100644
--- a/src/components/share/ImportModal.vue
+++ b/src/components/share/ImportModal.vue
@@ -50,7 +50,7 @@
 <script setup>
 import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
 import { ENV_CONFIG_MODULE_KEY, injectStrict } from "@/utils/inject";
-import { mdiInformation } from "@mdi/js";
+import { mdiInformation } from "@icons/material";
 import { computed, reactive, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { RenderHTML } from "@feature-render-html";
diff --git a/src/components/share/SelectCourseModal.vue b/src/components/share/SelectCourseModal.vue
index fd0130a66b..f447e51327 100644
--- a/src/components/share/SelectCourseModal.vue
+++ b/src/components/share/SelectCourseModal.vue
@@ -49,7 +49,7 @@
 
 <script setup lang="ts">
 import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
-import { mdiInformation } from "@/components/icons/material";
+import { mdiInformation } from "@icons/material";
 import { PropType, reactive, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { AllItems, ListItemsObject } from "@/store/types/rooms";
diff --git a/src/components/share/ShareModal.vue b/src/components/share/ShareModal.vue
index 636ca22777..3511519c05 100644
--- a/src/components/share/ShareModal.vue
+++ b/src/components/share/ShareModal.vue
@@ -68,7 +68,7 @@ import {
 	NOTIFIER_MODULE_KEY,
 	SHARE_MODULE_KEY,
 } from "@/utils/inject";
-import { mdiInformation } from "@/components/icons/material";
+import { mdiInformation } from "@icons/material";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
diff --git a/src/components/share/ShareModalResult.vue b/src/components/share/ShareModalResult.vue
index 3307b7f068..6397bcca43 100644
--- a/src/components/share/ShareModalResult.vue
+++ b/src/components/share/ShareModalResult.vue
@@ -62,7 +62,7 @@ import {
 	mdiEmailOutline,
 	mdiQrcode,
 	mdiShareVariantOutline,
-} from "@/components/icons/material";
+} from "@icons/material";
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 
diff --git a/src/components/templates/RoomWrapper.vue b/src/components/templates/RoomWrapper.vue
index 0cf5ba6248..58fa028400 100644
--- a/src/components/templates/RoomWrapper.vue
+++ b/src/components/templates/RoomWrapper.vue
@@ -44,7 +44,7 @@ import {
 	courseRoomListModule,
 } from "@/store";
 import { StartNewCourseSyncDialog } from "@feature-course-sync";
-import { mdiImport, mdiPlus, mdiSchoolOutline, mdiSync } from "@mdi/js";
+import { mdiImport, mdiPlus, mdiSchoolOutline, mdiSync } from "@icons/material";
 import { computed, ComputedRef, Ref, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { Fab, FabAction } from "./default-wireframe.types";
diff --git a/src/components/templates/TasksDashboardMain.vue b/src/components/templates/TasksDashboardMain.vue
index 018fbda3c8..ccadc47662 100644
--- a/src/components/templates/TasksDashboardMain.vue
+++ b/src/components/templates/TasksDashboardMain.vue
@@ -107,7 +107,7 @@ import {
 	mdiFormatListChecks,
 	mdiPlaylistEdit,
 	mdiPlus,
-} from "@mdi/js";
+} from "@icons/material";
 
 import TasksDashboardStudent from "./TasksDashboardStudent";
 import TasksDashboardTeacher from "./TasksDashboardTeacher";
diff --git a/src/modules/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.vue b/src/modules/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.vue
index 0bc0ee59d8..2b621f7857 100644
--- a/src/modules/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.vue
+++ b/src/modules/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.vue
@@ -39,7 +39,7 @@ import {
 	CollaborativeTextEditorParentType,
 } from "@/serverApi/v3";
 import { useBoardFocusHandler } from "@data-board";
-import { mdiTextBoxEditOutline } from "@mdi/js";
+import { mdiTextBoxEditOutline } from "@icons/material";
 import { ContentElementBar } from "@ui-board";
 import { computed, PropType, ref, toRef } from "vue";
 import { useI18n } from "vue-i18n";
diff --git a/src/modules/feature/board-deleted-element/DeletedElement.vue b/src/modules/feature/board-deleted-element/DeletedElement.vue
index de818013f3..31446867b7 100644
--- a/src/modules/feature/board-deleted-element/DeletedElement.vue
+++ b/src/modules/feature/board-deleted-element/DeletedElement.vue
@@ -39,7 +39,7 @@
 <script setup lang="ts">
 import { ContentElementType, DeletedElementResponse } from "@/serverApi/v3";
 import { useBoardFocusHandler, useBoardPermissions } from "@data-board";
-import { mdiPuzzleOutline } from "@mdi/js";
+import { mdiPuzzleOutline } from "@icons/material";
 import { WarningAlert } from "@ui-alert";
 import { ContentElementBar } from "@ui-board";
 import { PropType, Ref, ref, toRef } from "vue";
diff --git a/src/modules/feature/board-drawing-element/InnerContent.vue b/src/modules/feature/board-drawing-element/InnerContent.vue
index 91c74780de..7e3ef63280 100644
--- a/src/modules/feature/board-drawing-element/InnerContent.vue
+++ b/src/modules/feature/board-drawing-element/InnerContent.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import image from "@/assets/img/tldraw.svg";
-import { mdiPresentation } from "@mdi/js";
+import { mdiPresentation } from "@icons/material";
 import { ContentElementBar } from "@ui-board";
 import { defineComponent } from "vue";
 
diff --git a/src/modules/feature/board-external-tool-element/ExternalToolElement.unit.ts b/src/modules/feature/board-external-tool-element/ExternalToolElement.unit.ts
index 43dc7cea18..147e2d4be3 100644
--- a/src/modules/feature/board-external-tool-element/ExternalToolElement.unit.ts
+++ b/src/modules/feature/board-external-tool-element/ExternalToolElement.unit.ts
@@ -27,7 +27,7 @@ import {
 	useExternalToolLaunchState,
 } from "@data-external-tool";
 import { createMock, DeepMocked } from "@golevelup/ts-jest";
-import { mdiPuzzleOutline } from "@mdi/js";
+import { mdiPuzzleOutline } from "@icons/material";
 import { useSharedLastCreatedElement } from "@util-board";
 import { shallowMount } from "@vue/test-utils";
 import { nextTick, ref } from "vue";
diff --git a/src/modules/feature/board-external-tool-element/ExternalToolElement.vue b/src/modules/feature/board-external-tool-element/ExternalToolElement.vue
index e6e23310ac..1a2b67bb37 100644
--- a/src/modules/feature/board-external-tool-element/ExternalToolElement.vue
+++ b/src/modules/feature/board-external-tool-element/ExternalToolElement.vue
@@ -65,7 +65,7 @@ import {
 	useExternalToolDisplayState,
 	useExternalToolLaunchState,
 } from "@data-external-tool";
-import { mdiPuzzleOutline } from "@mdi/js";
+import { mdiPuzzleOutline } from "@icons/material";
 import { ContentElementBar } from "@ui-board";
 import { useSharedLastCreatedElement } from "@util-board";
 import {
diff --git a/src/modules/feature/board-external-tool-element/ExternalToolElementMenu.vue b/src/modules/feature/board-external-tool-element/ExternalToolElementMenu.vue
index 60a9ffaf1a..e06c6da8fe 100644
--- a/src/modules/feature/board-external-tool-element/ExternalToolElementMenu.vue
+++ b/src/modules/feature/board-external-tool-element/ExternalToolElementMenu.vue
@@ -15,7 +15,7 @@ import {
 	mdiArrowCollapseUp,
 	mdiCogOutline,
 	mdiTrashCanOutline,
-} from "@mdi/js";
+} from "@icons/material";
 import {
 	BoardMenu,
 	BoardMenuAction,
diff --git a/src/modules/feature/board-file-element/content/display/audio-display/AudioDisplay.unit.ts b/src/modules/feature/board-file-element/content/display/audio-display/AudioDisplay.unit.ts
index e0671d89b9..4ee21c0a7c 100644
--- a/src/modules/feature/board-file-element/content/display/audio-display/AudioDisplay.unit.ts
+++ b/src/modules/feature/board-file-element/content/display/audio-display/AudioDisplay.unit.ts
@@ -3,7 +3,7 @@ import {
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
 import { createMock } from "@golevelup/ts-jest";
-import { mdiPause, mdiPlay } from "@mdi/js";
+import { mdiPause, mdiPlay } from "@icons/material";
 import { mount } from "@vue/test-utils";
 import { useMediaControls } from "@vueuse/core";
 import { nextTick, ref } from "vue";
diff --git a/src/modules/feature/board-file-element/content/display/audio-display/AudioDisplay.vue b/src/modules/feature/board-file-element/content/display/audio-display/AudioDisplay.vue
index a0a0d37364..69486dc9cf 100644
--- a/src/modules/feature/board-file-element/content/display/audio-display/AudioDisplay.vue
+++ b/src/modules/feature/board-file-element/content/display/audio-display/AudioDisplay.vue
@@ -57,7 +57,7 @@
 
 <script lang="ts">
 import { formatSecondsToHourMinSec } from "@/utils/fileHelper";
-import { mdiPause, mdiPlay, mdiPlaySpeed } from "@mdi/js";
+import { mdiPause, mdiPlay, mdiPlaySpeed } from "@icons/material";
 import { ContentElementBar } from "@ui-board";
 import { useMediaControls } from "@vueuse/core";
 import { computed, defineComponent, ref } from "vue";
diff --git a/src/modules/feature/board-file-element/content/display/audio-display/SpeedMenu.unit.ts b/src/modules/feature/board-file-element/content/display/audio-display/SpeedMenu.unit.ts
index 4d3e4abc49..fd3eb64d60 100644
--- a/src/modules/feature/board-file-element/content/display/audio-display/SpeedMenu.unit.ts
+++ b/src/modules/feature/board-file-element/content/display/audio-display/SpeedMenu.unit.ts
@@ -2,7 +2,7 @@ import {
 	createTestingI18n,
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
-import { mdiCheck } from "@mdi/js";
+import { mdiCheck } from "@icons/material";
 import { shallowMount } from "@vue/test-utils";
 import SpeedMenu from "./SpeedMenu.vue";
 
diff --git a/src/modules/feature/board-file-element/content/display/audio-display/SpeedMenu.vue b/src/modules/feature/board-file-element/content/display/audio-display/SpeedMenu.vue
index 4b942ddd90..8a3c1c55b8 100644
--- a/src/modules/feature/board-file-element/content/display/audio-display/SpeedMenu.vue
+++ b/src/modules/feature/board-file-element/content/display/audio-display/SpeedMenu.vue
@@ -86,7 +86,7 @@
 </template>
 
 <script lang="ts">
-import { mdiCheck, mdiPlaySpeed } from "@mdi/js";
+import { mdiCheck, mdiPlaySpeed } from "@icons/material";
 import { defineComponent } from "vue";
 
 export default defineComponent({
diff --git a/src/modules/feature/board-file-element/content/display/file-description/FileDescription.unit.ts b/src/modules/feature/board-file-element/content/display/file-description/FileDescription.unit.ts
index 91ea465bbf..15063915d4 100644
--- a/src/modules/feature/board-file-element/content/display/file-description/FileDescription.unit.ts
+++ b/src/modules/feature/board-file-element/content/display/file-description/FileDescription.unit.ts
@@ -2,7 +2,7 @@ import {
 	createTestingI18n,
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
-import { mdiFileDocumentOutline } from "@mdi/js";
+import { mdiFileDocumentOutline } from "@icons/material";
 import { ContentElementBar } from "@ui-board";
 import { mount, shallowMount } from "@vue/test-utils";
 import FileDescription from "./FileDescription.vue";
diff --git a/src/modules/feature/board-file-element/content/display/file-description/FileDescription.vue b/src/modules/feature/board-file-element/content/display/file-description/FileDescription.vue
index 30a74eb125..a72ac18f7e 100644
--- a/src/modules/feature/board-file-element/content/display/file-description/FileDescription.vue
+++ b/src/modules/feature/board-file-element/content/display/file-description/FileDescription.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiFileDocumentOutline } from "@mdi/js";
+import { mdiFileDocumentOutline } from "@icons/material";
 import { ContentElementBar } from "@ui-board";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
diff --git a/src/modules/feature/board-file-element/content/footer/download/FileDownload.unit.ts b/src/modules/feature/board-file-element/content/footer/download/FileDownload.unit.ts
index f1c597db35..9bad66e09a 100644
--- a/src/modules/feature/board-file-element/content/footer/download/FileDownload.unit.ts
+++ b/src/modules/feature/board-file-element/content/footer/download/FileDownload.unit.ts
@@ -3,7 +3,7 @@ import {
 	createTestingI18n,
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
-import { mdiTrayArrowDown } from "@mdi/js";
+import { mdiTrayArrowDown } from "@icons/material";
 import { shallowMount } from "@vue/test-utils";
 import { nextTick } from "vue";
 import FileDownload from "./FileDownload.vue";
diff --git a/src/modules/feature/board-file-element/content/footer/download/FileDownload.vue b/src/modules/feature/board-file-element/content/footer/download/FileDownload.vue
index 416dab0359..dfa15fd17a 100644
--- a/src/modules/feature/board-file-element/content/footer/download/FileDownload.vue
+++ b/src/modules/feature/board-file-element/content/footer/download/FileDownload.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import { downloadFile } from "@/utils/fileHelper";
-import { mdiTrayArrowDown } from "@mdi/js";
+import { mdiTrayArrowDown } from "@icons/material";
 import { defineComponent } from "vue";
 
 export default defineComponent({
diff --git a/src/modules/feature/board-file-element/upload/file-picker/FilePicker.vue b/src/modules/feature/board-file-element/upload/file-picker/FilePicker.vue
index e6f83137d5..4f170c6950 100644
--- a/src/modules/feature/board-file-element/upload/file-picker/FilePicker.vue
+++ b/src/modules/feature/board-file-element/upload/file-picker/FilePicker.vue
@@ -3,14 +3,14 @@
 		density="compact"
 		ref="inputRef"
 		@update:modelValue="onFileChange"
-		prepend-icon="$mdiTrayArrowUp"
+		:prepend-icon="mdiTrayArrowUp"
 		:placeholder="$t('feature-board-file-element.placeholder.uploadFile')"
 		:hide-details="true"
 	/>
 </template>
 
 <script lang="ts">
-import { mdiTrayArrowUp } from "@mdi/js";
+import { mdiTrayArrowUp } from "@icons/material";
 import { useVModel } from "@vueuse/core";
 import { defineComponent, onMounted, ref, watch } from "vue";
 
diff --git a/src/modules/feature/board-link-element/components/LinkContentElementCreate.vue b/src/modules/feature/board-link-element/components/LinkContentElementCreate.vue
index 8f89714aee..d354d40d81 100644
--- a/src/modules/feature/board-link-element/components/LinkContentElementCreate.vue
+++ b/src/modules/feature/board-link-element/components/LinkContentElementCreate.vue
@@ -35,7 +35,7 @@
 import { defineComponent, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { isRequired, isValidUrl } from "@util-validators";
-import { mdiCheck } from "@mdi/js";
+import { mdiCheck } from "@icons/material";
 
 type VuetifyFormApi = {
 	validate: () => { valid: boolean };
diff --git a/src/modules/feature/board-link-element/components/LinkContentElementDisplay.vue b/src/modules/feature/board-link-element/components/LinkContentElementDisplay.vue
index e92b58cb35..8cf95f2aa9 100644
--- a/src/modules/feature/board-link-element/components/LinkContentElementDisplay.vue
+++ b/src/modules/feature/board-link-element/components/LinkContentElementDisplay.vue
@@ -32,7 +32,7 @@
 
 <script setup lang="ts">
 import { ComputedRef, computed, ref } from "vue";
-import { mdiLink } from "@mdi/js";
+import { mdiLink } from "@icons/material";
 import { ContentElementBar } from "@ui-board";
 import { injectStrict } from "@/utils/inject";
 import { useDisplay } from "vuetify";
diff --git a/src/modules/feature/board-submission-element/components/SubmissionContentElementEdit.vue b/src/modules/feature/board-submission-element/components/SubmissionContentElementEdit.vue
index a3ee1341f3..1e0eb30dd7 100644
--- a/src/modules/feature/board-submission-element/components/SubmissionContentElementEdit.vue
+++ b/src/modules/feature/board-submission-element/components/SubmissionContentElementEdit.vue
@@ -25,7 +25,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 import { useI18n } from "vue-i18n";
-import { mdiLightbulbOnOutline } from "@mdi/js";
+import { mdiLightbulbOnOutline } from "@icons/material";
 import { TeacherSubmission } from "../types/submission";
 import { DateTimePicker } from "@ui-date-time-picker";
 import SubmissionContentElementTitle from "./SubmissionContentElementTitle.vue";
diff --git a/src/modules/feature/board-submission-element/components/SubmissionContentElementTitle.vue b/src/modules/feature/board-submission-element/components/SubmissionContentElementTitle.vue
index 7e15159c86..b883f9125b 100644
--- a/src/modules/feature/board-submission-element/components/SubmissionContentElementTitle.vue
+++ b/src/modules/feature/board-submission-element/components/SubmissionContentElementTitle.vue
@@ -8,9 +8,8 @@
 			size="18"
 			class="mr-2"
 			data-testid="board-submission-element-edit-icon"
-		>
-			$mdiLightbulbOnOutline
-		</v-icon>
+			:icon="mdiLightbulbOnOutline"
+		/>
 		<span
 			class="text-subtitle-1 d-inline-block text-truncate font-weight-bold"
 			data-testid="board-submission-element-edit-content"
@@ -21,6 +20,7 @@
 </template>
 
 <script lang="ts">
+import { mdiLightbulbOnOutline } from "@icons/material";
 import { defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
 
@@ -29,6 +29,7 @@ export default defineComponent({
 	setup() {
 		const { t } = useI18n();
 		return {
+			mdiLightbulbOnOutline,
 			t,
 		};
 	},
diff --git a/src/modules/feature/board-submission-element/components/SubmissionItemsTeacherDisplay.vue b/src/modules/feature/board-submission-element/components/SubmissionItemsTeacherDisplay.vue
index 001e4cb986..70e66cf451 100644
--- a/src/modules/feature/board-submission-element/components/SubmissionItemsTeacherDisplay.vue
+++ b/src/modules/feature/board-submission-element/components/SubmissionItemsTeacherDisplay.vue
@@ -100,6 +100,7 @@ import { DataTableHeader } from "@/types/vuetify";
 import { useI18n } from "vue-i18n";
 import { MaybeRef } from "@vueuse/core";
 import { VExpansionPanelTitle } from "vuetify/lib/components/index.mjs";
+import { mdiCheck, mdiClose, mdiMinus } from "@icons/material";
 
 type StatusFilter = "all" | Status;
 
@@ -174,13 +175,13 @@ export default defineComponent({
 		};
 		const getStatusIcon = (item: TeacherSubmission) => {
 			if (item.status === "open") {
-				return "$mdiMinus";
+				return mdiMinus;
 			}
 			if (item.status === "completed") {
-				return "$mdiCheck";
+				return mdiCheck;
 			}
 			if (item.status === "expired") {
-				return "$mdiClose";
+				return mdiClose;
 			}
 		};
 		const getFilterClass = (filter: StatusFilter, count: number) => {
diff --git a/src/modules/feature/board/board/BoardAddCardButton.vue b/src/modules/feature/board/board/BoardAddCardButton.vue
index 3703ad663d..e1a3acc136 100644
--- a/src/modules/feature/board/board/BoardAddCardButton.vue
+++ b/src/modules/feature/board/board/BoardAddCardButton.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiPlus } from "@mdi/js";
+import { mdiPlus } from "@icons/material";
 import { computed } from "vue";
 import { useSharedEditMode } from "@data-board";
 
diff --git a/src/modules/feature/board/board/BoardColumnGhostHeader.vue b/src/modules/feature/board/board/BoardColumnGhostHeader.vue
index bd2a098363..4b5954adc7 100644
--- a/src/modules/feature/board/board/BoardColumnGhostHeader.vue
+++ b/src/modules/feature/board/board/BoardColumnGhostHeader.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiPlus } from "@mdi/js";
+import { mdiPlus } from "@icons/material";
 
 defineProps({
 	isColumnActive: {
diff --git a/src/modules/feature/board/card/CardAddElementMenu.vue b/src/modules/feature/board/card/CardAddElementMenu.vue
index b855a3a7cd..f9ad69b723 100644
--- a/src/modules/feature/board/card/CardAddElementMenu.vue
+++ b/src/modules/feature/board/card/CardAddElementMenu.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { mdiPlus } from "@mdi/js";
+import { mdiPlus } from "@icons/material";
 import { defineComponent } from "vue";
 
 export default defineComponent({
diff --git a/src/modules/feature/board/card/CardHost.vue b/src/modules/feature/board/card/CardHost.vue
index 556d4cc640..6a9e1b31b4 100644
--- a/src/modules/feature/board/card/CardHost.vue
+++ b/src/modules/feature/board/card/CardHost.vue
@@ -97,7 +97,7 @@ import {
 	useCardStore,
 	useEditMode,
 } from "@data-board";
-import { mdiArrowExpand } from "@mdi/js";
+import { mdiArrowExpand } from "@icons/material";
 import {
 	BoardMenu,
 	BoardMenuActionDelete,
diff --git a/src/modules/feature/board/card/CardHostDetailView.vue b/src/modules/feature/board/card/CardHostDetailView.vue
index 34eed8b64c..88650e3a2b 100644
--- a/src/modules/feature/board/card/CardHostDetailView.vue
+++ b/src/modules/feature/board/card/CardHostDetailView.vue
@@ -65,7 +65,7 @@
 import { CardResponse } from "@/serverApi/v3";
 import { ElementMove } from "@/types/board/DragAndDrop";
 import { useBoardPermissions } from "@data-board";
-import { mdiClose } from "@mdi/js";
+import { mdiClose } from "@icons/material";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { defineComponent, PropType, ref } from "vue";
 import CardAddElementMenu from "./CardAddElementMenu.vue";
diff --git a/src/modules/feature/board/shared/AddElementDialog.composable.ts b/src/modules/feature/board/shared/AddElementDialog.composable.ts
index 4e98f9a7b3..5108d7a8ce 100644
--- a/src/modules/feature/board/shared/AddElementDialog.composable.ts
+++ b/src/modules/feature/board/shared/AddElementDialog.composable.ts
@@ -9,7 +9,7 @@ import {
 	mdiPuzzleOutline,
 	mdiTextBoxEditOutline,
 	mdiTrayArrowUp,
-} from "@mdi/js";
+} from "@icons/material";
 import { useBoardNotifier } from "@util-board";
 import { useI18n } from "vue-i18n";
 import { useSharedElementTypeSelection } from "./SharedElementTypeSelection.composable";
diff --git a/src/modules/feature/media-shelf/MediaBoardLineMenu.unit.ts b/src/modules/feature/media-shelf/MediaBoardLineMenu.unit.ts
index b519fce534..207e81c8b3 100644
--- a/src/modules/feature/media-shelf/MediaBoardLineMenu.unit.ts
+++ b/src/modules/feature/media-shelf/MediaBoardLineMenu.unit.ts
@@ -3,7 +3,7 @@ import {
 	createTestingI18n,
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
-import { mdiChevronDown, mdiChevronUp } from "@mdi/js";
+import { mdiChevronDown, mdiChevronUp } from "@icons/material";
 import { mount } from "@vue/test-utils";
 import { nextTick } from "vue";
 import { ComponentProps } from "vue-component-type-helpers";
diff --git a/src/modules/feature/media-shelf/MediaBoardLineMenu.vue b/src/modules/feature/media-shelf/MediaBoardLineMenu.vue
index 73ac87e6ae..0aff0342e5 100644
--- a/src/modules/feature/media-shelf/MediaBoardLineMenu.vue
+++ b/src/modules/feature/media-shelf/MediaBoardLineMenu.vue
@@ -90,7 +90,7 @@ import {
 	mdiPalette,
 	mdiRenameOutline,
 	mdiTrashCanOutline,
-} from "@mdi/js";
+} from "@icons/material";
 import { computed, ComputedRef, ModelRef, PropType } from "vue";
 import { ColorShade, MediaBoardColorMapper } from "./utils";
 
diff --git a/src/modules/feature/news-form/FormNews.vue b/src/modules/feature/news-form/FormNews.vue
index 70928205a0..772402f682 100644
--- a/src/modules/feature/news-form/FormNews.vue
+++ b/src/modules/feature/news-form/FormNews.vue
@@ -94,7 +94,7 @@ import { fromInputDateTime, createInputDateTime } from "@/plugins/datetime";
 import { newsModule, notifierModule } from "@/store";
 import TitleInput from "./TitleInput.vue";
 import FormActions from "./FormActions.vue";
-import { mdiClose, mdiCheck, mdiDelete } from "@mdi/js";
+import { mdiAlert, mdiClose, mdiCheck, mdiDelete } from "@icons/material";
 import { CkEditor } from "@feature-editor";
 
 export default defineComponent({
@@ -226,7 +226,7 @@ export default defineComponent({
 		},
 		async remove() {
 			this.dialogConfirm({
-				icon: "$mdiAlert",
+				icon: mdiAlert,
 				iconColor: "rgba(var(--v-theme-error))",
 				message: this.$t(
 					"components.organisms.FormNews.remove.confirm.message"
@@ -245,7 +245,7 @@ export default defineComponent({
 				message: this.$t(
 					"components.organisms.FormNews.cancel.confirm.message"
 				),
-				icon: "$mdiAlert",
+				icon: mdiAlert,
 				cancelText: this.$t("common.actions.cancel"),
 				confirmText: this.$t(
 					"components.organisms.FormNews.cancel.confirm.confirm"
diff --git a/src/modules/page/media-shelf/MediaShelf.page.vue b/src/modules/page/media-shelf/MediaShelf.page.vue
index 7e7f5f31ed..cdb37b77d9 100644
--- a/src/modules/page/media-shelf/MediaShelf.page.vue
+++ b/src/modules/page/media-shelf/MediaShelf.page.vue
@@ -15,7 +15,7 @@
 				@update:model-value="updateMediaBoardLayout"
 			>
 				<VBtn
-					icon="$mdiCustomShelfOutline"
+					icon="$shelfOutline"
 					size="x-small"
 					width="48px"
 					:value="MediaBoardLayoutType.List"
@@ -69,7 +69,7 @@ import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
 import { MediaBoardLayoutType } from "@/serverApi/v3";
 import { buildPageTitle } from "@/utils/pageTitle";
 import { MediaBoard, useSharedMediaBoardState } from "@feature-media-shelf";
-import { mdiViewGridOutline } from "@mdi/js";
+import { mdiViewGridOutline } from "@icons/material";
 import { useTitle } from "@vueuse/core";
 import { computed, ComputedRef, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
diff --git a/src/modules/ui/alert/ErrorAlert.unit.ts b/src/modules/ui/alert/ErrorAlert.unit.ts
index 68cb7f59fd..1fa9735663 100644
--- a/src/modules/ui/alert/ErrorAlert.unit.ts
+++ b/src/modules/ui/alert/ErrorAlert.unit.ts
@@ -1,4 +1,4 @@
-import { mdiAlertCircle } from "@mdi/js";
+import { mdiAlertCircle } from "@icons/material";
 import { shallowMount } from "@vue/test-utils";
 import BaseAlert from "./BaseAlert.vue";
 import ErrorAlert from "./ErrorAlert.vue";
diff --git a/src/modules/ui/alert/ErrorAlert.vue b/src/modules/ui/alert/ErrorAlert.vue
index 41cf3dafa5..893af1a4e5 100644
--- a/src/modules/ui/alert/ErrorAlert.vue
+++ b/src/modules/ui/alert/ErrorAlert.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { mdiAlertCircle } from "@mdi/js";
+import { mdiAlertCircle } from "@icons/material";
 import { defineComponent } from "vue";
 import BaseAlert from "./BaseAlert.vue";
 
diff --git a/src/modules/ui/alert/InfoAlert.unit.ts b/src/modules/ui/alert/InfoAlert.unit.ts
index f7e6cdce87..4611e6445f 100644
--- a/src/modules/ui/alert/InfoAlert.unit.ts
+++ b/src/modules/ui/alert/InfoAlert.unit.ts
@@ -1,4 +1,4 @@
-import { mdiInformation } from "@mdi/js";
+import { mdiInformation } from "@icons/material";
 import { shallowMount } from "@vue/test-utils";
 import BaseAlert from "./BaseAlert.vue";
 import InfoAlert from "./InfoAlert.vue";
diff --git a/src/modules/ui/alert/InfoAlert.vue b/src/modules/ui/alert/InfoAlert.vue
index fcc3f70254..36b6c29d4e 100644
--- a/src/modules/ui/alert/InfoAlert.vue
+++ b/src/modules/ui/alert/InfoAlert.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { mdiInformation, mdiClose } from "@mdi/js";
+import { mdiInformation, mdiClose } from "@icons/material";
 import { defineComponent } from "vue";
 import BaseAlert from "./BaseAlert.vue";
 
diff --git a/src/modules/ui/alert/SuccessAlert.unit.ts b/src/modules/ui/alert/SuccessAlert.unit.ts
index be8c78e8fb..a5aaddcae2 100644
--- a/src/modules/ui/alert/SuccessAlert.unit.ts
+++ b/src/modules/ui/alert/SuccessAlert.unit.ts
@@ -1,4 +1,4 @@
-import { mdiCheckCircle } from "@mdi/js";
+import { mdiCheckCircle } from "@icons/material";
 import { shallowMount } from "@vue/test-utils";
 import BaseAlert from "./BaseAlert.vue";
 import SuccessAlert from "./SuccessAlert.vue";
diff --git a/src/modules/ui/alert/SuccessAlert.vue b/src/modules/ui/alert/SuccessAlert.vue
index 7023e5bd59..73a30d774e 100644
--- a/src/modules/ui/alert/SuccessAlert.vue
+++ b/src/modules/ui/alert/SuccessAlert.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { mdiCheckCircle } from "@mdi/js";
+import { mdiCheckCircle } from "@icons/material";
 import { defineComponent } from "vue";
 import BaseAlert from "./BaseAlert.vue";
 
diff --git a/src/modules/ui/alert/WarningAlert.unit.ts b/src/modules/ui/alert/WarningAlert.unit.ts
index b3cb967aa8..acb0589994 100644
--- a/src/modules/ui/alert/WarningAlert.unit.ts
+++ b/src/modules/ui/alert/WarningAlert.unit.ts
@@ -1,4 +1,4 @@
-import { mdiAlert } from "@mdi/js";
+import { mdiAlert } from "@icons/material";
 import { shallowMount } from "@vue/test-utils";
 import BaseAlert from "./BaseAlert.vue";
 import WarningAlert from "./WarningAlert.vue";
diff --git a/src/modules/ui/alert/WarningAlert.vue b/src/modules/ui/alert/WarningAlert.vue
index 291cb73eb3..23d2093aca 100644
--- a/src/modules/ui/alert/WarningAlert.vue
+++ b/src/modules/ui/alert/WarningAlert.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { mdiAlert } from "@mdi/js";
+import { mdiAlert } from "@icons/material";
 import { defineComponent } from "vue";
 import BaseAlert from "./BaseAlert.vue";
 
diff --git a/src/modules/ui/board/BoardMenu.vue b/src/modules/ui/board/BoardMenu.vue
index bf48b6b84f..ac0bbafcc4 100644
--- a/src/modules/ui/board/BoardMenu.vue
+++ b/src/modules/ui/board/BoardMenu.vue
@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
 import type { MessageSchema } from "@/locales/schema";
-import { mdiDotsVertical } from "@mdi/js";
+import { mdiDotsVertical } from "@icons/material";
 import { computed, PropType, provide, toRef } from "vue";
 import { BoardMenuScope } from "./board-menu-scope";
 import { MENU_SCOPE } from "./injection-tokens";
diff --git a/src/modules/ui/board/BoardMenuActionCopy.vue b/src/modules/ui/board/BoardMenuActionCopy.vue
index 52555665d8..d69bbefddb 100644
--- a/src/modules/ui/board/BoardMenuActionCopy.vue
+++ b/src/modules/ui/board/BoardMenuActionCopy.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { BoardMenuAction } from "@ui-board";
-import { mdiContentCopy } from "@/components/icons/material";
+import { mdiContentCopy } from "@icons/material";
 
 const emit = defineEmits(["click"]);
 
diff --git a/src/modules/ui/board/BoardMenuActionDelete.vue b/src/modules/ui/board/BoardMenuActionDelete.vue
index b23213175a..bc92407518 100644
--- a/src/modules/ui/board/BoardMenuActionDelete.vue
+++ b/src/modules/ui/board/BoardMenuActionDelete.vue
@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import type { MessageSchema } from "@/locales/schema";
 import { injectStrict } from "@/utils/inject";
-import { mdiTrashCanOutline } from "@mdi/js";
+import { mdiTrashCanOutline } from "@icons/material";
 import { BoardMenuAction } from "@ui-board";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { BoardMenuScope } from "./board-menu-scope";
diff --git a/src/modules/ui/board/BoardMenuActionEdit.unit.ts b/src/modules/ui/board/BoardMenuActionEdit.unit.ts
index cc6f234d46..416dedc342 100644
--- a/src/modules/ui/board/BoardMenuActionEdit.unit.ts
+++ b/src/modules/ui/board/BoardMenuActionEdit.unit.ts
@@ -1,7 +1,4 @@
-import {
-	mdiPencilOutline,
-	mdiRenameOutline,
-} from "@/components/icons/material";
+import { mdiPencilOutline, mdiRenameOutline } from "@icons/material";
 import {
 	createTestingI18n,
 	createTestingVuetify,
diff --git a/src/modules/ui/board/BoardMenuActionEdit.vue b/src/modules/ui/board/BoardMenuActionEdit.vue
index 0231ef25d2..b7790f6eed 100644
--- a/src/modules/ui/board/BoardMenuActionEdit.vue
+++ b/src/modules/ui/board/BoardMenuActionEdit.vue
@@ -9,10 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-	mdiPencilOutline,
-	mdiRenameOutline,
-} from "@/components/icons/material";
+import { mdiPencilOutline, mdiRenameOutline } from "@icons/material";
 import { injectStrict } from "@/utils/inject";
 import { BoardMenuAction, BoardMenuScope } from "@ui-board";
 import { computed } from "vue";
diff --git a/src/modules/ui/board/BoardMenuActionMoveColumnDown.vue b/src/modules/ui/board/BoardMenuActionMoveColumnDown.vue
index 0204dd8171..d40cec7927 100644
--- a/src/modules/ui/board/BoardMenuActionMoveColumnDown.vue
+++ b/src/modules/ui/board/BoardMenuActionMoveColumnDown.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { injectStrict } from "@/utils/inject";
-import { mdiArrowDown } from "@mdi/js";
+import { mdiArrowDown } from "@icons/material";
 import { BoardMenuAction } from "@ui-board";
 import { BOARD_HAS_MULTIPLE_COLUMNS, BOARD_IS_LAST_COLUMN } from "@util-board";
 import { computed, ref } from "vue";
diff --git a/src/modules/ui/board/BoardMenuActionMoveColumnUp.vue b/src/modules/ui/board/BoardMenuActionMoveColumnUp.vue
index 68f16d6d56..f24de4f74e 100644
--- a/src/modules/ui/board/BoardMenuActionMoveColumnUp.vue
+++ b/src/modules/ui/board/BoardMenuActionMoveColumnUp.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { injectStrict } from "@/utils/inject";
-import { mdiArrowUp } from "@mdi/js";
+import { mdiArrowUp } from "@icons/material";
 import { BoardMenuAction } from "@ui-board";
 import { BOARD_HAS_MULTIPLE_COLUMNS, BOARD_IS_FIRST_COLUMN } from "@util-board";
 import { computed, ref } from "vue";
diff --git a/src/modules/ui/board/BoardMenuActionMoveDown.vue b/src/modules/ui/board/BoardMenuActionMoveDown.vue
index 5ee78659a4..2fa276f89e 100644
--- a/src/modules/ui/board/BoardMenuActionMoveDown.vue
+++ b/src/modules/ui/board/BoardMenuActionMoveDown.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { injectStrict } from "@/utils/inject";
-import { mdiArrowDown } from "@mdi/js";
+import { mdiArrowDown } from "@icons/material";
 import { BoardMenuAction } from "@ui-board";
 import {
 	BOARD_CARD_HAS_MULTIPLE_ELEMENTS,
diff --git a/src/modules/ui/board/BoardMenuActionMoveLeft.vue b/src/modules/ui/board/BoardMenuActionMoveLeft.vue
index ee8455729c..5f50b2ae4a 100644
--- a/src/modules/ui/board/BoardMenuActionMoveLeft.vue
+++ b/src/modules/ui/board/BoardMenuActionMoveLeft.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { injectStrict } from "@/utils/inject";
-import { mdiArrowLeft } from "@mdi/js";
+import { mdiArrowLeft } from "@icons/material";
 import { BoardMenuAction } from "@ui-board";
 import { BOARD_HAS_MULTIPLE_COLUMNS, BOARD_IS_FIRST_COLUMN } from "@util-board";
 import { computed, ref } from "vue";
diff --git a/src/modules/ui/board/BoardMenuActionMoveRight.vue b/src/modules/ui/board/BoardMenuActionMoveRight.vue
index 02e7d409b3..cabcbb1f94 100644
--- a/src/modules/ui/board/BoardMenuActionMoveRight.vue
+++ b/src/modules/ui/board/BoardMenuActionMoveRight.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { injectStrict } from "@/utils/inject";
-import { mdiArrowRight } from "@mdi/js";
+import { mdiArrowRight } from "@icons/material";
 import { BoardMenuAction } from "@ui-board";
 import { BOARD_HAS_MULTIPLE_COLUMNS, BOARD_IS_LAST_COLUMN } from "@util-board";
 import { computed, ref } from "vue";
diff --git a/src/modules/ui/board/BoardMenuActionMoveUp.vue b/src/modules/ui/board/BoardMenuActionMoveUp.vue
index 0c75a7a68f..1b23bd4823 100644
--- a/src/modules/ui/board/BoardMenuActionMoveUp.vue
+++ b/src/modules/ui/board/BoardMenuActionMoveUp.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { injectStrict } from "@/utils/inject";
-import { mdiArrowUp } from "@mdi/js";
+import { mdiArrowUp } from "@icons/material";
 import { BoardMenuAction } from "@ui-board";
 import {
 	BOARD_CARD_HAS_MULTIPLE_ELEMENTS,
diff --git a/src/modules/ui/board/BoardMenuActionPublish.vue b/src/modules/ui/board/BoardMenuActionPublish.vue
index 9b041de23d..8711f7b2b1 100644
--- a/src/modules/ui/board/BoardMenuActionPublish.vue
+++ b/src/modules/ui/board/BoardMenuActionPublish.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiEyeOutline } from "@mdi/js";
+import { mdiEyeOutline } from "@icons/material";
 import { BoardMenuAction } from "@ui-board";
 import { useI18n } from "vue-i18n";
 
diff --git a/src/modules/ui/board/BoardMenuActionRevert.vue b/src/modules/ui/board/BoardMenuActionRevert.vue
index d5e52ca129..bb043ba541 100644
--- a/src/modules/ui/board/BoardMenuActionRevert.vue
+++ b/src/modules/ui/board/BoardMenuActionRevert.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiRestore } from "@mdi/js";
+import { mdiRestore } from "@icons/material";
 import { BoardMenuAction } from "@ui-board";
 import { useI18n } from "vue-i18n";
 
diff --git a/src/modules/ui/board/BoardMenuActionShare.vue b/src/modules/ui/board/BoardMenuActionShare.vue
index 53fcc1520c..9a763057da 100644
--- a/src/modules/ui/board/BoardMenuActionShare.vue
+++ b/src/modules/ui/board/BoardMenuActionShare.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { BoardMenuAction } from "@ui-board";
-import { mdiShareVariantOutline } from "@/components/icons/material";
+import { mdiShareVariantOutline } from "@icons/material";
 
 const emit = defineEmits(["click"]);
 
diff --git a/src/modules/ui/chip/InfoChip.unit.ts b/src/modules/ui/chip/InfoChip.unit.ts
index cd04e14afd..6234dab72e 100644
--- a/src/modules/ui/chip/InfoChip.unit.ts
+++ b/src/modules/ui/chip/InfoChip.unit.ts
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { mdiInformation } from "@mdi/js";
+import { mdiInformation } from "@icons/material";
 import {
 	createTestingI18n,
 	createTestingVuetify,
diff --git a/src/modules/ui/chip/InfoChip.vue b/src/modules/ui/chip/InfoChip.vue
index 637e9927af..4ef27ff087 100644
--- a/src/modules/ui/chip/InfoChip.vue
+++ b/src/modules/ui/chip/InfoChip.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiInformation } from "@mdi/js";
+import { mdiInformation } from "@icons/material";
 </script>
 
 <style scoped>
diff --git a/src/modules/ui/chip/WarningChip.unit.ts b/src/modules/ui/chip/WarningChip.unit.ts
index b75de70b87..413cdccabd 100644
--- a/src/modules/ui/chip/WarningChip.unit.ts
+++ b/src/modules/ui/chip/WarningChip.unit.ts
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { mdiAlert } from "@mdi/js";
+import { mdiAlert } from "@icons/material";
 import {
 	createTestingI18n,
 	createTestingVuetify,
diff --git a/src/modules/ui/chip/WarningChip.vue b/src/modules/ui/chip/WarningChip.vue
index d4ddbd0e45..50fbaab03a 100644
--- a/src/modules/ui/chip/WarningChip.vue
+++ b/src/modules/ui/chip/WarningChip.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiAlert } from "@mdi/js";
+import { mdiAlert } from "@icons/material";
 </script>
 
 <style scoped>
diff --git a/src/modules/ui/date-time-picker/DatePicker.vue b/src/modules/ui/date-time-picker/DatePicker.vue
index 40e377e146..71cb506785 100644
--- a/src/modules/ui/date-time-picker/DatePicker.vue
+++ b/src/modules/ui/date-time-picker/DatePicker.vue
@@ -11,7 +11,7 @@
 					v-model="dateString"
 					ref="inputField"
 					data-testid="date-input"
-					append-inner-icon="$mdiCalendar"
+					:append-inner-icon="mdiCalendar"
 					:label="label"
 					:aria-label="ariaLabel"
 					:placeholder="t('common.placeholder.dateformat')"
@@ -51,6 +51,7 @@ import { helpers, requiredIf } from "@vuelidate/validators";
 import { dateInputMask as vDateInputMask } from "@util-input-masks";
 import { isValidDateFormat } from "@util-validators";
 import { DATETIME_FORMAT } from "@/plugins/datetime";
+import { mdiCalendar } from "@icons/material";
 
 const props = defineProps({
 	date: { type: String }, // ISO 8601 string
diff --git a/src/modules/ui/date-time-picker/TimePicker.vue b/src/modules/ui/date-time-picker/TimePicker.vue
index 620ec156be..95691d2ea7 100644
--- a/src/modules/ui/date-time-picker/TimePicker.vue
+++ b/src/modules/ui/date-time-picker/TimePicker.vue
@@ -3,7 +3,7 @@
 		<v-text-field
 			v-model="timeValue"
 			data-testid="time-input"
-			append-inner-icon="$mdiClockOutline"
+			:append-inner-icon="mdiClockOutline"
 			:label="label"
 			:aria-label="ariaLabel"
 			placeholder="HH:MM"
@@ -23,6 +23,7 @@ import { useVuelidate } from "@vuelidate/core";
 import { helpers, requiredIf } from "@vuelidate/validators";
 import { timeInputMask as vTimeInputMask } from "@util-input-masks";
 import { isValidTimeFormat } from "@util-validators";
+import { mdiClockOutline } from "@icons/material";
 
 const props = defineProps({
 	time: { type: String, required: true },
diff --git a/src/modules/ui/layout/sidebar/Sidebar.vue b/src/modules/ui/layout/sidebar/Sidebar.vue
index b2a466c4fd..c055822368 100644
--- a/src/modules/ui/layout/sidebar/Sidebar.vue
+++ b/src/modules/ui/layout/sidebar/Sidebar.vue
@@ -53,7 +53,7 @@ import SidebarItem from "./SidebarItem.vue";
 import SidebarCategoryItem from "./SidebarCategoryItem.vue";
 import { SidebarGroupItem, SidebarSingleItem, SidebarItems } from "../types";
 import { useSidebarItems } from "./SidebarItems.composable";
-import { mdiMenuOpen } from "@mdi/js";
+import { mdiMenuOpen } from "@icons/material";
 
 const authModule = injectStrict(AUTH_MODULE_KEY);
 const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
diff --git a/src/modules/ui/layout/sidebar/SidebarItems.composable.ts b/src/modules/ui/layout/sidebar/SidebarItems.composable.ts
index e58f8c49df..6d96fafab2 100644
--- a/src/modules/ui/layout/sidebar/SidebarItems.composable.ts
+++ b/src/modules/ui/layout/sidebar/SidebarItems.composable.ts
@@ -4,7 +4,21 @@ import {
 	FILE_PATHS_MODULE_KEY,
 	injectStrict,
 } from "@/utils/inject";
-import { mdiBookshelf } from "@mdi/js";
+import {
+	mdiAccountGroupOutline,
+	mdiAccountSupervisorCircleOutline,
+	mdiApplicationBracketsOutline,
+	mdiBookshelf,
+	mdiCalendarOutline,
+	mdiCogOutline,
+	mdiFolderOpenOutline,
+	mdiFormatListChecks,
+	mdiHelpCircleOutline,
+	mdiNewspaperVariantOutline,
+	mdiPuzzleOutline,
+	mdiSchoolOutline,
+	mdiViewGridOutline,
+} from "@icons/material";
 import { computed, ComputedRef } from "vue";
 import { useI18n } from "vue-i18n";
 import { SidebarGroupItem, SidebarItems, SidebarSingleItem } from "../types";
@@ -18,39 +32,39 @@ export const useSidebarItems = () => {
 		{
 			title: "global.sidebar.item.overview",
 			href: "/dashboard",
-			icon: "$mdiViewGridOutline",
+			icon: mdiViewGridOutline,
 			testId: "Übersicht",
 		},
 		{
 			title: "global.sidebar.item.rooms",
 			to: "/rooms",
-			icon: "$mdiAccountSupervisorCircleOutline",
+			icon: mdiAccountSupervisorCircleOutline,
 			feature: "FEATURE_ROOMS_ENABLED",
 			testId: "Räume",
 		},
 		{
 			title: "global.sidebar.item.courses",
 			to: "/rooms/courses-overview",
-			icon: "$mdiSchoolOutline",
+			icon: mdiSchoolOutline,
 			testId: "Course-Overview",
 		},
 		{
 			title: "global.sidebar.item.teams",
 			href: "/teams",
-			icon: "$mdiAccountGroupOutline",
+			icon: mdiAccountGroupOutline,
 			permissions: ["TEAMS_ENABLED"],
 			testId: "Teams",
 		},
 		{
 			title: "global.sidebar.item.tasks",
 			to: "/tasks",
-			icon: "$mdiFormatListChecks",
+			icon: mdiFormatListChecks,
 			permissions: ["TASK_DASHBOARD_VIEW_V3", "TASK_DASHBOARD_TEACHER_VIEW_V3"],
 			testId: "Aufgaben",
 		},
 		{
 			title: "global.sidebar.item.files-old",
-			icon: "$mdiFolderOpenOutline",
+			icon: mdiFolderOpenOutline,
 			testId: "Dateien",
 			children: [
 				{
@@ -79,13 +93,13 @@ export const useSidebarItems = () => {
 		{
 			title: "pages.news.title",
 			href: "/news",
-			icon: "$mdiNewspaperVariantOutline",
+			icon: mdiNewspaperVariantOutline,
 			testId: "Neuigkeiten",
 		},
 		{
 			title: "global.sidebar.item.calendar",
 			href: "/calendar",
-			icon: "$mdiCalendarOutline",
+			icon: mdiCalendarOutline,
 			testId: "Termine",
 		},
 		{
@@ -105,7 +119,7 @@ export const useSidebarItems = () => {
 		{
 			title: "global.sidebar.item.addons",
 			href: "/addons",
-			icon: "$mdiPuzzleOutline",
+			icon: mdiPuzzleOutline,
 			permissions: ["ADDONS_ENABLED"],
 			testId: "Add-ons",
 		},
@@ -194,7 +208,7 @@ export const useSidebarItems = () => {
 	const metaLinks: ComputedRef<SidebarGroupItem[]> = computed(() => [
 		{
 			title: "global.sidebar.item.management",
-			icon: "$mdiCogOutline",
+			icon: mdiCogOutline,
 			permissions: ["TEACHER_LIST", "ADMIN_VIEW"],
 			testId: "Verwaltung",
 			children: [
@@ -264,7 +278,7 @@ export const useSidebarItems = () => {
 		},
 		{
 			title: "global.sidebar.item.helpArea",
-			icon: "$mdiHelpCircleOutline",
+			icon: mdiHelpCircleOutline,
 			testId: "Hilfebereich",
 			children: [
 				{
@@ -292,7 +306,7 @@ export const useSidebarItems = () => {
 		},
 		{
 			title: "global.sidebar.item.system",
-			icon: "$mdiApplicationBracketsOutline",
+			icon: mdiApplicationBracketsOutline,
 			testId: "system",
 			children: systemLinks,
 		},
diff --git a/src/modules/ui/layout/topbar/CloudStatusMessages.vue b/src/modules/ui/layout/topbar/CloudStatusMessages.vue
index 51865392b2..0157fdb8f3 100644
--- a/src/modules/ui/layout/topbar/CloudStatusMessages.vue
+++ b/src/modules/ui/layout/topbar/CloudStatusMessages.vue
@@ -44,7 +44,7 @@
 <script setup lang="ts">
 import { PropType } from "vue";
 import { formatDateForAlerts } from "@/plugins/datetime";
-import { mdiAlertCircle, mdiInformation } from "@mdi/js";
+import { mdiAlertCircle, mdiInformation } from "@icons/material";
 import { StatusAlert } from "@/store/types/status-alert";
 
 defineProps({
diff --git a/src/modules/ui/layout/topbar/PageShare.vue b/src/modules/ui/layout/topbar/PageShare.vue
index 02e9e243a9..dee41b6fc7 100644
--- a/src/modules/ui/layout/topbar/PageShare.vue
+++ b/src/modules/ui/layout/topbar/PageShare.vue
@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
 import { ComponentPublicInstance, ref } from "vue";
-import { mdiPrinter, mdiContentCopy } from "@/components/icons/material";
+import { mdiPrinter, mdiContentCopy } from "@icons/material";
 import { QRCode } from "@ui-qr-code";
 
 const props = defineProps({
diff --git a/src/modules/ui/layout/topbar/Topbar.vue b/src/modules/ui/layout/topbar/Topbar.vue
index e9d9ee3245..09e521e3e8 100644
--- a/src/modules/ui/layout/topbar/Topbar.vue
+++ b/src/modules/ui/layout/topbar/Topbar.vue
@@ -58,7 +58,7 @@ import {
 	STATUS_ALERTS_MODULE_KEY,
 	injectStrict,
 } from "@/utils/inject";
-import { mdiMenu, mdiAlert, mdiQrcode } from "@/components/icons/material";
+import { mdiMenu, mdiAlert, mdiQrcode } from "@icons/material";
 import TopbarItem from "./TopbarItem.vue";
 import PageShare from "./PageShare.vue";
 import CloudStatusMessages from "./CloudStatusMessages.vue";
diff --git a/src/modules/ui/layout/topbar/TopbarItem.unit.ts b/src/modules/ui/layout/topbar/TopbarItem.unit.ts
index a5065a7194..f53cbc85ca 100644
--- a/src/modules/ui/layout/topbar/TopbarItem.unit.ts
+++ b/src/modules/ui/layout/topbar/TopbarItem.unit.ts
@@ -4,7 +4,7 @@ import {
 } from "@@/tests/test-utils/setup";
 import { mount } from "@vue/test-utils";
 import TopbarItem from "./TopbarItem.vue";
-import { mdiAlert } from "@mdi/js";
+import { mdiAlert } from "@icons/material";
 
 describe("@ui-layout/TopbarItem", () => {
 	const setup = () => {
diff --git a/src/modules/ui/light-box/LightBox.unit.ts b/src/modules/ui/light-box/LightBox.unit.ts
index e0c7d731d6..4739deb946 100644
--- a/src/modules/ui/light-box/LightBox.unit.ts
+++ b/src/modules/ui/light-box/LightBox.unit.ts
@@ -3,7 +3,7 @@ import {
 	createTestingI18n,
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
-import { mdiClose, mdiTrayArrowDown } from "@mdi/js";
+import { mdiClose, mdiTrayArrowDown } from "@icons/material";
 import { PreviewImage } from "@ui-preview-image";
 import { shallowMount } from "@vue/test-utils";
 import { nextTick, ref } from "vue";
diff --git a/src/modules/ui/light-box/LightBox.vue b/src/modules/ui/light-box/LightBox.vue
index 2587d15435..bfe75491b3 100644
--- a/src/modules/ui/light-box/LightBox.vue
+++ b/src/modules/ui/light-box/LightBox.vue
@@ -33,7 +33,7 @@
 
 <script setup lang="ts">
 import { downloadFile } from "@/utils/fileHelper";
-import { mdiClose, mdiTrayArrowDown } from "@mdi/js";
+import { mdiClose, mdiTrayArrowDown } from "@icons/material";
 import { onKeyStroke } from "@vueuse/core";
 import { ref, watch } from "vue";
 import { useInternalLightBox } from "./LightBox.composable";
diff --git a/src/modules/ui/room-details/RoomBoardCard.vue b/src/modules/ui/room-details/RoomBoardCard.vue
index e1af995723..84ac1983f4 100644
--- a/src/modules/ui/room-details/RoomBoardCard.vue
+++ b/src/modules/ui/room-details/RoomBoardCard.vue
@@ -68,7 +68,7 @@ import {
 	mdiTrashCanOutline,
 	mdiUndoVariant,
 	mdiViewDashboardOutline,
-} from "@/components/icons/material";
+} from "@icons/material";
 import {
 	BoardLayout,
 	ImportUserResponseRoleNamesEnum as Roles,
@@ -129,9 +129,7 @@ const isListBoard = computed(() => {
 });
 
 const titleIcon = computed(() => {
-	const icon = isListBoard.value
-		? "$mdiCustomGridOutline"
-		: mdiViewDashboardOutline;
+	const icon = isListBoard.value ? "$gridOutline" : mdiViewDashboardOutline;
 	return icon;
 });
 
diff --git a/src/modules/ui/room-details/RoomDotMenu.vue b/src/modules/ui/room-details/RoomDotMenu.vue
index 8a68e3451b..c2c329b676 100644
--- a/src/modules/ui/room-details/RoomDotMenu.vue
+++ b/src/modules/ui/room-details/RoomDotMenu.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiDotsVertical } from "@mdi/js";
+import { mdiDotsVertical } from "@icons/material";
 import { PropType } from "vue";
 import { MenuItem } from "./types";
 
diff --git a/src/modules/ui/room-details/RoomLessonCard.vue b/src/modules/ui/room-details/RoomLessonCard.vue
index 1b5dcbca74..bcd2170872 100644
--- a/src/modules/ui/room-details/RoomLessonCard.vue
+++ b/src/modules/ui/room-details/RoomLessonCard.vue
@@ -84,7 +84,7 @@ import {
 	mdiShareVariantOutline,
 	mdiTrashCanOutline,
 	mdiUndoVariant,
-} from "@mdi/js";
+} from "@icons/material";
 import { RoomDotMenu } from "@ui-room-details";
 import { computed, PropType, toRef } from "vue";
 import { useI18n } from "vue-i18n";
diff --git a/src/modules/ui/room-details/SelectBoardLayoutDialog.vue b/src/modules/ui/room-details/SelectBoardLayoutDialog.vue
index 6a491d86df..f14fd8fc77 100644
--- a/src/modules/ui/room-details/SelectBoardLayoutDialog.vue
+++ b/src/modules/ui/room-details/SelectBoardLayoutDialog.vue
@@ -36,20 +36,21 @@
 import { useI18n } from "vue-i18n";
 import { PickerOption } from "./types";
 import { ExtendedIconBtn } from "@ui-extended-icon-btn";
+import { mdiViewDashboardOutline } from "@icons/material";
 
 const { t } = useI18n();
 
 const boardLayouts: PickerOption[] = [
 	{
 		label: t("pages.room.dialog.boardLayout.multiColumn"),
-		icon: "$mdiViewDashboardOutline",
+		icon: mdiViewDashboardOutline,
 		eventName: "select:multi-column",
 		dataTestId: "dialog-add-multi-column-board",
 		ariaLabel: t("pages.room.dialog.boardLayout.multiColumn"),
 	},
 	{
 		label: t("pages.room.dialog.boardLayout.singleColumn"),
-		icon: "$mdiCustomGridOutline",
+		icon: "$gridOutline",
 		eventName: "select:single-column",
 		dataTestId: "dialog-add-single-column-board",
 		ariaLabel: t("pages.room.dialog.boardLayout.singleColumn"),
diff --git a/src/modules/ui/speed-dial-menu/SpeedDialMenu.unit.ts b/src/modules/ui/speed-dial-menu/SpeedDialMenu.unit.ts
index 55644167f7..226808f8b8 100644
--- a/src/modules/ui/speed-dial-menu/SpeedDialMenu.unit.ts
+++ b/src/modules/ui/speed-dial-menu/SpeedDialMenu.unit.ts
@@ -1,5 +1,5 @@
 import { createTestingVuetify } from "@@/tests/test-utils/setup";
-import { mdiClose } from "@mdi/js";
+import { mdiClose } from "@icons/material";
 import { mount, VueWrapper } from "@vue/test-utils";
 import { DefineComponent, defineComponent, nextTick } from "vue";
 import { VBtn } from "vuetify/lib/components/index.mjs";
diff --git a/src/modules/ui/speed-dial-menu/SpeedDialMenu.vue b/src/modules/ui/speed-dial-menu/SpeedDialMenu.vue
index 22cb491ef2..ea60b237be 100644
--- a/src/modules/ui/speed-dial-menu/SpeedDialMenu.vue
+++ b/src/modules/ui/speed-dial-menu/SpeedDialMenu.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts" setup>
-import { mdiClose } from "@mdi/js";
+import { mdiClose } from "@icons/material";
 import { useVuetifyBreakpoints } from "@util-device-detection";
 import { OnClickOutside } from "@vueuse/components";
 import { useWindowScroll, watchThrottled } from "@vueuse/core";
diff --git a/src/pages/ActivationCode.page.vue b/src/pages/ActivationCode.page.vue
index 39527b1771..8c23f09e8e 100644
--- a/src/pages/ActivationCode.page.vue
+++ b/src/pages/ActivationCode.page.vue
@@ -9,7 +9,7 @@
 		>
 			<template #icon>
 				<v-icon class="material-icon">{{
-					activated ? "$mdiEmailCheckOutline" : "$mdiEmailRemoveOutline"
+					activated ? mdiEmailCheckOutline : mdiEmailRemoveOutline
 				}}</v-icon>
 			</template>
 		</info-modal-full-width>
@@ -20,6 +20,7 @@
 import InfoModalFullWidth from "@/components/molecules/InfoModalFullWidth";
 import { mapGetters } from "vuex";
 import { buildPageTitle } from "@/utils/pageTitle";
+import { mdiEmailCheckOutline, mdiEmailRemoveOutline } from "@icons/material";
 
 export default {
 	components: {
@@ -30,6 +31,8 @@ export default {
 			activated: false,
 			keyword: null,
 			showModal: false,
+			mdiEmailCheckOutline,
+			mdiEmailRemoveOutline,
 		};
 	},
 	computed: {
diff --git a/src/pages/LernStoreOverview.page.vue b/src/pages/LernStoreOverview.page.vue
index a72464d208..055b120c9e 100644
--- a/src/pages/LernStoreOverview.page.vue
+++ b/src/pages/LernStoreOverview.page.vue
@@ -94,7 +94,7 @@
 <script setup lang="ts">
 import { onMounted, computed, ref } from "vue";
 import { useDebounceFn, watchDebounced } from "@vueuse/core";
-import { mdiChevronLeft, mdiMagnify, mdiClose } from "@mdi/js";
+import { mdiChevronLeft, mdiMagnify, mdiClose } from "@icons/material";
 import {
 	CONTENT_MODULE_KEY,
 	NOTIFIER_MODULE_KEY,
diff --git a/src/pages/administration/ClassOverview.page.vue b/src/pages/administration/ClassOverview.page.vue
index 26a53e577e..c8f09a81df 100644
--- a/src/pages/administration/ClassOverview.page.vue
+++ b/src/pages/administration/ClassOverview.page.vue
@@ -211,7 +211,7 @@ import {
 	mdiPencilOutline,
 	mdiSyncOff,
 	mdiTrashCanOutline,
-} from "@mdi/js";
+} from "@icons/material";
 import { useTitle } from "@vueuse/core";
 import { computed, ComputedRef, onMounted, PropType, ref, Ref } from "vue";
 import { useI18n } from "vue-i18n";
diff --git a/src/pages/administration/LDAPActivate.page.vue b/src/pages/administration/LDAPActivate.page.vue
index 424f661d4e..ca8b42273d 100644
--- a/src/pages/administration/LDAPActivate.page.vue
+++ b/src/pages/administration/LDAPActivate.page.vue
@@ -7,7 +7,7 @@
 		<section class="section">
 			<div class="icon-text">
 				<div class="icon-text-unit">
-					<v-icon class="material-icon">$mdiAccountSchoolOutline</v-icon>
+					<v-icon class="material-icon" :icon="mdiAccountSchoolOutline" />
 					<span>{{ verified.users && verified.users.student }}</span>
 					<span>{{ $t("common.labels.students") }}</span>
 				</div>
@@ -17,7 +17,10 @@
 					<span>{{ $t("common.labels.teacher.plural") }}</span>
 				</div>
 				<div class="icon-text-unit">
-					<v-icon class="material-icon">$mdiShieldAccountVariantOutline</v-icon>
+					<v-icon
+						class="material-icon"
+						:icon="mdiShieldAccountVariantOutline"
+					/>
 					<span>{{ verified.users && verified.users.admin }}</span>
 					<span>{{ $t("common.labels.admin") }}</span>
 				</div>
@@ -169,9 +172,11 @@
 					:title="$t('pages.administration.ldap.activate.message')"
 				>
 					<template #icon>
-						<v-icon color="rgba(var(--v-theme-success))" class="material-icon">
-							$mdiCheckCircle
-						</v-icon>
+						<v-icon
+							color="rgba(var(--v-theme-success))"
+							class="material-icon"
+							:icon="mdiCheckCircle"
+						/>
 					</template>
 				</modal-body-info>
 			</template>
@@ -195,7 +200,12 @@ import { unchangedPassword } from "@/utils/ldapConstants";
 import ModalBodyInfo from "@/components/molecules/ModalBodyInfo";
 import ModalFooterConfirm from "@/components/molecules/ModalFooterConfirm";
 import InfoMessage from "@/components/atoms/InfoMessage";
-import { mdiChevronLeft } from "@mdi/js";
+import {
+	mdiAccountSchoolOutline,
+	mdiCheckCircle,
+	mdiChevronLeft,
+	mdiShieldAccountVariantOutline,
+} from "@icons/material";
 import { RenderHTML } from "@feature-render-html";
 import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
 import { buildPageTitle } from "@/utils/pageTitle";
@@ -220,7 +230,10 @@ export default {
 	data() {
 		return {
 			migrateUsersCheckbox: false,
+			mdiAccountSchoolOutline,
+			mdiCheckCircle,
 			mdiChevronLeft,
+			mdiShieldAccountVariantOutline,
 		};
 	},
 	computed: {
diff --git a/src/pages/administration/Migration.page.vue b/src/pages/administration/Migration.page.vue
index f8a7116bdf..8c9384518e 100644
--- a/src/pages/administration/Migration.page.vue
+++ b/src/pages/administration/Migration.page.vue
@@ -554,7 +554,7 @@ import { BusinessError } from "@/store/types/commons";
 import { injectStrict, THEME_KEY } from "@/utils/inject";
 import { buildPageTitle } from "@/utils/pageTitle";
 import { RenderHTML } from "@feature-render-html";
-import { mdiClose } from "@mdi/js";
+import { mdiClose } from "@icons/material";
 import { useTitle } from "@vueuse/core";
 import {
 	computed,
diff --git a/src/pages/administration/RoomsOverview.page.vue b/src/pages/administration/RoomsOverview.page.vue
index c934bb13ef..b017c389f3 100644
--- a/src/pages/administration/RoomsOverview.page.vue
+++ b/src/pages/administration/RoomsOverview.page.vue
@@ -160,7 +160,7 @@ import { useTitle } from "@vueuse/core";
 import { computed, ComputedRef, onMounted, PropType, ref, Ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
-import { mdiPencilOutline, mdiSync, mdiTrashCanOutline } from "@mdi/js";
+import { mdiPencilOutline, mdiSync, mdiTrashCanOutline } from "@icons/material";
 
 type Tab = "current" | "archive";
 
diff --git a/src/pages/administration/SchoolSettings.page.vue b/src/pages/administration/SchoolSettings.page.vue
index dc14dd2a65..8632c4236c 100644
--- a/src/pages/administration/SchoolSettings.page.vue
+++ b/src/pages/administration/SchoolSettings.page.vue
@@ -153,7 +153,7 @@
 <script lang="ts">
 import AdminMigrationSection from "@/components/administration/AdminMigrationSection.vue";
 import ExternalToolsSection from "@/components/administration/ExternalToolSection.vue";
-import { mdiAlertCircle, mdiMinus, mdiPlus } from "@/components/icons/material";
+import { mdiAlertCircle, mdiMinus, mdiPlus } from "@icons/material";
 import AuthSystems from "@/components/organisms/administration/AuthSystems.vue";
 import GeneralSettings from "@/components/organisms/administration/GeneralSettings.vue";
 import SchoolPolicy from "@/components/organisms/administration/SchoolPolicy.vue";
diff --git a/src/pages/administration/StudentConsent.page.vue b/src/pages/administration/StudentConsent.page.vue
index dd22522de7..764108d95d 100644
--- a/src/pages/administration/StudentConsent.page.vue
+++ b/src/pages/administration/StudentConsent.page.vue
@@ -324,7 +324,7 @@ import {
 	inputDateFromDeUTC,
 	printDateFromDeUTC,
 } from "@/plugins/datetime";
-import { mdiAlert } from "@mdi/js";
+import { mdiAlert } from "@icons/material";
 import { buildPageTitle } from "@/utils/pageTitle";
 
 export default {
diff --git a/src/pages/administration/StudentOverview.page.vue b/src/pages/administration/StudentOverview.page.vue
index 86386f2d5e..c58885f241 100644
--- a/src/pages/administration/StudentOverview.page.vue
+++ b/src/pages/administration/StudentOverview.page.vue
@@ -28,7 +28,7 @@
 				@update:model-value="barSearch"
 			>
 				<template #icon>
-					<v-icon>$mdiMagnify</v-icon>
+					<v-icon :icon="mdiMagnify" />
 				</template>
 			</base-input>
 
@@ -83,20 +83,20 @@
 							v-if="status === 'ok'"
 							class="material-icon"
 							color="rgba(var(--v-theme-success))"
-							>$mdiCheckAll</v-icon
-						>
+							:icon="mdiCheckAll"
+						/>
 						<v-icon
 							v-else-if="status === 'parentsAgreed'"
 							class="material-icon"
 							color="rgba(var(--v-theme-warning))"
-							>$mdiCheck</v-icon
-						>
+							:icon="mdiCheck"
+						/>
 						<v-icon
 							v-else-if="status === 'missing'"
 							class="material-icon"
 							color="rgba(var(--v-theme-error))"
-							>$mdiClose</v-icon
-						>
+							:icon="mdiClose"
+						/>
 					</span>
 				</template>
 				<template #datacolumn-_id="{ data, selected, highlighted }">
@@ -114,7 +114,7 @@
 						"
 						data-testid="edit_student_button"
 					>
-						<v-icon size="20">$mdiPencilOutline</v-icon>
+						<v-icon size="20" :icon="mdiPencilOutline" />
 					</v-btn>
 				</template>
 			</backend-data-table>
@@ -144,7 +144,20 @@ import print from "@/mixins/print";
 import UserHasPermission from "@/mixins/UserHasPermission";
 import { printDate } from "@/plugins/datetime";
 import ProgressModal from "@/components/molecules/ProgressModal";
-import { mdiAccountPlus, mdiCloudDownload } from "@mdi/js";
+import {
+	mdiAccountPlus,
+	mdiAlert,
+	mdiCheck,
+	mdiCheckAll,
+	mdiClose,
+	mdiCloudDownload,
+	mdiDeleteOutline,
+	mdiEmailOutline,
+	mdiMagnify,
+	mdiPencilOutline,
+	mdiPlus,
+	mdiQrcode,
+} from "@icons/material";
 import { buildPageTitle } from "@/utils/pageTitle";
 import { reactive } from "vue";
 import DataFilter from "@/components/organisms/DataFilter/DataFilter.vue";
@@ -166,7 +179,17 @@ export default {
 	data() {
 		return {
 			mdiAccountPlus,
+			mdiAlert,
+			mdiCheck,
+			mdiCheckAll,
+			mdiClose,
 			mdiCloudDownload,
+			mdiDeleteOutline,
+			mdiEmailOutline,
+			mdiMagnify,
+			mdiPencilOutline,
+			mdiPlus,
+			mdiQrcode,
 			currentFilterQuery: this.getUiState(
 				"filter",
 				"pages.administration.students.index"
@@ -294,7 +317,7 @@ export default {
 						: this.$t(
 								"pages.administration.students.index.tableActions.registration"
 							),
-					icon: "$mdiCheck",
+					icon: mdiCheck,
 					action: this.handleBulkConsent,
 					dataTestId: "consent_action",
 				},
@@ -302,13 +325,13 @@ export default {
 					label: this.$t(
 						"pages.administration.students.index.tableActions.email"
 					),
-					icon: "$mdiEmailOutline",
+					icon: mdiEmailOutline,
 					action: this.handleBulkEMail,
 					dataTestId: "registration_link",
 				},
 				{
 					label: this.$t("pages.administration.students.index.tableActions.qr"),
-					icon: "$mdiQrcode",
+					icon: mdiQrcode,
 					action: this.handleBulkQR,
 					dataTestId: "qr_code",
 				},
@@ -316,7 +339,7 @@ export default {
 					label: this.$t(
 						"pages.administration.students.index.tableActions.delete"
 					),
-					icon: "$mdiDeleteOutline",
+					icon: mdiDeleteOutline,
 					action: this.handleBulkDelete,
 					permission: "STUDENT_DELETE",
 					dataTestId: "delete_action",
@@ -384,14 +407,14 @@ export default {
 			const instanceBasedIcons = [];
 
 			instanceBasedIcons.push({
-				icon: "$mdiCheckAll",
+				icon: mdiCheckAll,
 				color: "rgba(var(--v-theme-success))",
 				label: this.$t("pages.administration.students.legend.icon.success"),
 			});
 
 			if (this.isConsentNecessary) {
 				instanceBasedIcons.push({
-					icon: "$mdiCheck",
+					icon: mdiCheck,
 					color: "rgba(var(--v-theme-warning))",
 					label: this.$t(
 						"utils.adminFilter.consent.label.parentsAgreementMissing"
@@ -400,7 +423,7 @@ export default {
 			}
 
 			instanceBasedIcons.push({
-				icon: "$mdiClose",
+				icon: mdiClose,
 				color: "rgba(var(--v-theme-error))",
 				label: this.$t("utils.adminFilter.consent.label.missing"),
 			});
@@ -416,7 +439,7 @@ export default {
 			}
 
 			return {
-				icon: "$mdiPlus",
+				icon: mdiPlus,
 				title: this.$t("common.actions.create"),
 				dataTestId: "fab_button_students_table",
 				ariaLabel: this.$t("common.actions.create"),
@@ -634,7 +657,7 @@ export default {
 					"pages.administration.students.index.remove.confirm.btnText"
 				),
 				cancelText: this.$t("common.actions.cancel"),
-				icon: "$mdiAlert",
+				icon: mdiAlert,
 				iconColor: "rgba(var(--v-theme-error))",
 				onConfirm,
 				onCancel,
diff --git a/src/pages/administration/TeacherOverview.page.vue b/src/pages/administration/TeacherOverview.page.vue
index 7272a9f218..b07493a72d 100644
--- a/src/pages/administration/TeacherOverview.page.vue
+++ b/src/pages/administration/TeacherOverview.page.vue
@@ -28,7 +28,7 @@
 				@update:model-value="barSearch"
 			>
 				<template #icon>
-					<v-icon>$mdiMagnify</v-icon>
+					<v-icon :icon="mdiMagnify" />
 				</template>
 			</base-input>
 
@@ -69,14 +69,14 @@
 							v-if="status === 'ok'"
 							class="material-icon"
 							color="rgba(var(--v-theme-success))"
-							>$mdiCheck</v-icon
-						>
+							:icon="mdiCheck"
+						/>
 						<v-icon
 							v-else-if="status === 'missing'"
 							class="material-icon"
 							color="rgba(var(--v-theme-error))"
-							>$mdiClose</v-icon
-						>
+							:icon="mdiClose"
+						/>
 					</span>
 				</template>
 				<template #datacolumn-lastLoginSystemChange="{ data }">
@@ -138,10 +138,17 @@ import { printDate } from "@/plugins/datetime";
 import ProgressModal from "@/components/molecules/ProgressModal";
 import {
 	mdiAccountPlus,
+	mdiAlert,
+	mdiCheck,
+	mdiClose,
 	mdiCloudDownload,
+	mdiDeleteOutline,
+	mdiEmailOutline,
+	mdiMagnify,
 	mdiPencilOutline,
 	mdiPlus,
-} from "@mdi/js";
+	mdiQrcode,
+} from "@icons/material";
 import { buildPageTitle } from "@/utils/pageTitle";
 import { reactive } from "vue";
 import DataFilter from "@/components/organisms/DataFilter/DataFilter.vue";
@@ -162,10 +169,17 @@ export default {
 	},
 	data() {
 		return {
-			mdiPlus,
 			mdiAccountPlus,
+			mdiAlert,
+			mdiCheck,
+			mdiClose,
 			mdiCloudDownload,
+			mdiDeleteOutline,
+			mdiEmailOutline,
+			mdiMagnify,
 			mdiPencilOutline,
+			mdiPlus,
+			mdiQrcode,
 			currentFilterQuery: this.getUiState(
 				"filter",
 				"pages.administration.teachers.index"
@@ -207,13 +221,13 @@ export default {
 					label: this.$t(
 						"pages.administration.teachers.index.tableActions.email"
 					),
-					icon: "$mdiEmailOutline",
+					icon: mdiEmailOutline,
 					action: this.handleBulkEMail,
 					dataTestId: "registration_link",
 				},
 				{
 					label: this.$t("pages.administration.teachers.index.tableActions.qr"),
-					icon: "$mdiQrcode",
+					icon: mdiQrcode,
 					action: this.handleBulkQR,
 					dataTestId: "qr_code",
 				},
@@ -221,7 +235,7 @@ export default {
 					label: this.$t(
 						"pages.administration.teachers.index.tableActions.delete"
 					),
-					icon: "$mdiDeleteOutline",
+					icon: mdiDeleteOutline,
 					action: this.handleBulkDelete,
 					permission: "TEACHER_DELETE",
 					dataTestId: "delete_action",
@@ -280,12 +294,12 @@ export default {
 			],
 			icons: [
 				{
-					icon: "$mdiCheck",
+					icon: mdiCheck,
 					color: "rgba(var(--v-theme-success))",
 					label: this.$t("pages.administration.students.legend.icon.success"),
 				},
 				{
-					icon: "$mdiClose",
+					icon: mdiClose,
 					color: "rgba(var(--v-theme-error))",
 					label: this.$t("utils.adminFilter.consent.label.missing"),
 				},
@@ -583,7 +597,7 @@ export default {
 					"pages.administration.teachers.index.remove.confirm.btnText"
 				),
 				cancelText: this.$t("common.actions.cancel"),
-				icon: "$mdiAlert",
+				icon: mdiAlert,
 				iconColor: "rgba(var(--v-theme-error))",
 				onConfirm,
 				onCancel,
diff --git a/src/pages/administration/student-overview.unit.js b/src/pages/administration/student-overview.unit.js
index fe6a932493..ca500be076 100644
--- a/src/pages/administration/student-overview.unit.js
+++ b/src/pages/administration/student-overview.unit.js
@@ -20,6 +20,7 @@ import { createStore } from "vuex";
 import mock$objects from "../../../tests/test-utils/pageStubs";
 import StudentPage from "./StudentOverview.page.vue";
 import { RouterLinkStub } from "@vue/test-utils";
+import { mdiCheckAll, mdiClose } from "@icons/material";
 
 const mockData = [
 	{
@@ -560,12 +561,12 @@ describe("students/index", () => {
 
 		expect(wrapper.vm.icons).toStrictEqual([
 			{
-				icon: "$mdiCheckAll",
+				icon: mdiCheckAll,
 				color: "rgba(var(--v-theme-success))",
 				label: "pages.administration.students.legend.icon.success",
 			},
 			{
-				icon: "$mdiClose",
+				icon: mdiClose,
 				color: "rgba(var(--v-theme-error))",
 				label: "utils.adminFilter.consent.label.missing",
 			},
diff --git a/src/pages/course-rooms/CourseRoomDetails.page.vue b/src/pages/course-rooms/CourseRoomDetails.page.vue
index 803f945eba..3539e87642 100644
--- a/src/pages/course-rooms/CourseRoomDetails.page.vue
+++ b/src/pages/course-rooms/CourseRoomDetails.page.vue
@@ -145,7 +145,8 @@ import {
 	mdiSyncOff,
 	mdiViewDashboardOutline,
 	mdiViewListOutline,
-} from "@mdi/js";
+	mdiViewGridPlusOutline,
+} from "@icons/material";
 import { defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import RoomExternalToolsOverview from "./tools/RoomExternalToolsOverview.vue";
@@ -203,6 +204,7 @@ export default defineComponent({
 				mdiExport,
 				mdiSyncOff,
 				mdiSync,
+				mdiViewGridPlusOutline,
 			},
 			breadcrumbs: [
 				{
@@ -333,7 +335,7 @@ export default defineComponent({
 				if (this.boardLayoutsEnabled) {
 					actions.push({
 						label: this.$t("pages.courseRoomDetails.fab.add.board"),
-						icon: "$mdiViewGridPlusOutline",
+						icon: mdiViewGridPlusOutline,
 						customEvent: "board-type-dialog-open",
 						dataTestId: "fab_button_add_board",
 						ariaLabel: this.$t("pages.courseRoomDetails.fab.add.board"),
diff --git a/src/pages/course-rooms/CourseRoomList.page.vue b/src/pages/course-rooms/CourseRoomList.page.vue
index 3dc0e4b46f..5ad0ec404b 100644
--- a/src/pages/course-rooms/CourseRoomList.page.vue
+++ b/src/pages/course-rooms/CourseRoomList.page.vue
@@ -63,7 +63,7 @@ import RoomWrapper from "@/components/templates/RoomWrapper.vue";
 import vRoomAvatar from "@/components/atoms/vRoomAvatar.vue";
 import { courseRoomListModule } from "@/store";
 import { ListItemsObject } from "@/store/types/rooms";
-import { mdiMagnify } from "@mdi/js";
+import { mdiMagnify } from "@icons/material";
 import { buildPageTitle } from "@/utils/pageTitle";
 import { defineComponent } from "vue";
 
diff --git a/src/pages/course-rooms/CourseRoomOverview.page.vue b/src/pages/course-rooms/CourseRoomOverview.page.vue
index a16ba68e2e..ee6f16e6c3 100644
--- a/src/pages/course-rooms/CourseRoomOverview.page.vue
+++ b/src/pages/course-rooms/CourseRoomOverview.page.vue
@@ -132,7 +132,7 @@ import RoomWrapper from "@/components/templates/RoomWrapper.vue";
 import { courseRoomListModule } from "@/store";
 import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
 import { buildPageTitle } from "@/utils/pageTitle";
-import { mdiCheck, mdiMagnify } from "@mdi/js";
+import { mdiCheck, mdiMagnify } from "@icons/material";
 import { defineComponent, reactive } from "vue";
 
 export default defineComponent({
diff --git a/src/pages/course-rooms/tools/RoomExternalToolsOverview.vue b/src/pages/course-rooms/tools/RoomExternalToolsOverview.vue
index 77bbcf1d2b..c95636ce51 100644
--- a/src/pages/course-rooms/tools/RoomExternalToolsOverview.vue
+++ b/src/pages/course-rooms/tools/RoomExternalToolsOverview.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiAlertCircle } from "@/components/icons/material";
+import { mdiAlertCircle } from "@icons/material";
 import VCustomEmptyState from "@/components/molecules/vCustomEmptyState.vue";
 import { ToolContextType } from "@/serverApi/v3";
 import CourseRoomDetailsModule from "@/store/course-room-details";
diff --git a/src/pages/course-rooms/tools/RoomVideoConferenceSection.vue b/src/pages/course-rooms/tools/RoomVideoConferenceSection.vue
index b7b1d1d251..dad2fc8129 100644
--- a/src/pages/course-rooms/tools/RoomVideoConferenceSection.vue
+++ b/src/pages/course-rooms/tools/RoomVideoConferenceSection.vue
@@ -130,7 +130,7 @@ import {
 } from "vue";
 import VCustomDialog from "@/components/organisms/vCustomDialog.vue";
 import CourseRoomDetailsModule from "@/store/course-room-details";
-import { mdiCheck } from "@mdi/js";
+import { mdiCheck } from "@icons/material";
 
 export default defineComponent({
 	name: "RoomVideoConferenceSection",
diff --git a/src/pages/h5p/H5PEditor.page.vue b/src/pages/h5p/H5PEditor.page.vue
index f22b98b824..fe8b9af901 100644
--- a/src/pages/h5p/H5PEditor.page.vue
+++ b/src/pages/h5p/H5PEditor.page.vue
@@ -33,7 +33,7 @@
 <script lang="ts">
 import { useApplicationError } from "@/composables/application-error.composable";
 import { applicationErrorModule, notifierModule } from "@/store";
-import { mdiChevronLeft } from "@mdi/js";
+import { mdiChevronLeft } from "@icons/material";
 import { PropType, defineComponent, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
diff --git a/src/pages/h5p/H5PPlayer.page.vue b/src/pages/h5p/H5PPlayer.page.vue
index 1635f7e583..10aae0be57 100644
--- a/src/pages/h5p/H5PPlayer.page.vue
+++ b/src/pages/h5p/H5PPlayer.page.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import { useApplicationError } from "@/composables/application-error.composable";
 import { applicationErrorModule } from "@/store";
-import { mdiChevronLeft } from "@mdi/js";
+import { mdiChevronLeft } from "@icons/material";
 import { defineComponent } from "vue";
 import { useRoute } from "vue-router";
 
diff --git a/src/themes/brb/components/templates/impressum.vue b/src/themes/brb/components/templates/impressum.vue
index 4d24cc6138..4bc39d8403 100644
--- a/src/themes/brb/components/templates/impressum.vue
+++ b/src/themes/brb/components/templates/impressum.vue
@@ -203,7 +203,7 @@
 </template>
 
 <script>
-import { mdiChat, mdiEmailOutline, mdiPhone } from "@mdi/js";
+import { mdiChat, mdiEmailOutline, mdiPhone } from "@icons/material";
 import { defineComponent } from "vue";
 
 // eslint-disable-next-line vue/require-direct-export
diff --git a/src/utils/sidebar-base-items.ts b/src/utils/sidebar-base-items.ts
index 455f61c006..6e33221973 100644
--- a/src/utils/sidebar-base-items.ts
+++ b/src/utils/sidebar-base-items.ts
@@ -1,5 +1,5 @@
 import { ConfigResponse } from "@/serverApi/v3/api";
-import { mdiBookshelf } from "@mdi/js";
+import { mdiBookshelf } from "@icons/material";
 
 export type SidebarItemBase = {
 	title: string;
diff --git a/tsconfig.json b/tsconfig.json
index 1fa8cf0d22..fcce8afd4f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -44,8 +44,11 @@
 			"@feature-render-html": ["src/modules/feature/render-html"],
 			"@feature-news-form": ["src/modules/feature/news-form"],
 			"@feature-media-shelf": ["src/modules/feature/media-shelf"],
-			"@feature-board-deleted-element": ["src/modules/feature/board-deleted-element"],
+			"@feature-board-deleted-element": [
+				"src/modules/feature/board-deleted-element"
+			],
 			"@feature-room": ["src/modules/feature/room"],
+			"@icons/*": ["src/components/icons/*"],
 			"@ui-alert": ["src/modules/ui/alert"],
 			"@ui-board": ["src/modules/ui/board"],
 			"@ui-chip": ["src/modules/ui/chip"],