From 65bd30d196aca663ed08cbdab83062fddd35fb13 Mon Sep 17 00:00:00 2001
From: Christian Hartmann <chris-hartmann@gmx.de>
Date: Tue, 12 May 2026 13:02:20 +0000
Subject: [PATCH] refactor: replace material design icons with material symbols

Signed-off-by: GitHub <noreply@github.com>
Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
---
 package-lock.json                             | 14 +--
 package.json                                  |  2 +-
 src/Forms.vue                                 | 22 ++---
 src/FormsEmptyContent.vue                     | 10 +--
 src/components/AppNavigationForm.vue          | 59 +++++++------
 src/components/Icons/FormsIcon.vue            | 49 -----------
 src/components/Icons/IconCopyAll.vue          | 49 -----------
 src/components/Icons/IconDragIndicator.vue    | 49 -----------
 src/components/Icons/IconLinearScale.vue      | 49 -----------
 src/components/Icons/IconPalette.vue          | 49 -----------
 src/components/PaginationToolbar.vue          | 31 ++++---
 src/components/Questions/AnswerInput.vue      | 47 +++++-----
 src/components/Questions/Question.vue         | 61 +++++++------
 src/components/Questions/QuestionColor.vue    |  8 +-
 src/components/Questions/QuestionDropdown.vue |  8 +-
 src/components/Questions/QuestionFile.vue     | 40 ++++-----
 .../Questions/QuestionLinearScale.vue         | 10 ++-
 src/components/Questions/QuestionMultiple.vue | 21 +++--
 src/components/Questions/QuestionShort.vue    |  8 +-
 src/components/Results/Answer.vue             | 19 +++--
 src/components/Results/ResultsSummary.vue     | 14 ++-
 src/components/Results/Submission.vue         | 19 +++--
 .../SidebarTabs/SharingShareDiv.vue           | 13 ++-
 .../SidebarTabs/SharingSidebarTab.vue         | 62 +++++++-------
 src/components/TopBar.vue                     | 13 ++-
 src/models/AnswerTypes.js                     | 54 ++++++------
 src/models/ValidationTypes.js                 | 10 +--
 src/views/Create.vue                          | 23 ++---
 src/views/Results.vue                         | 85 ++++++++++---------
 src/views/Sidebar.vue                         | 19 +++--
 30 files changed, 370 insertions(+), 547 deletions(-)
 delete mode 100644 src/components/Icons/FormsIcon.vue
 delete mode 100644 src/components/Icons/IconCopyAll.vue
 delete mode 100644 src/components/Icons/IconDragIndicator.vue
 delete mode 100644 src/components/Icons/IconLinearScale.vue
 delete mode 100644 src/components/Icons/IconPalette.vue

diff --git a/package-lock.json b/package-lock.json
index 22bb10f9d..7aeee79d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "5.2.1",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
+        "@material-symbols/svg-400": "^0.44.6",
         "@nextcloud/auth": "^2.6.0",
         "@nextcloud/axios": "^2.6.0",
         "@nextcloud/dialogs": "^7.3.0",
@@ -26,7 +27,6 @@
         "qrcode": "^1.5.4",
         "vue": "^3.5.22",
         "vue-draggable-plus": "^0.6.1",
-        "vue-material-design-icons": "^5.3.1",
         "vue-router": "^4.6.0"
       },
       "devDependencies": {
@@ -1296,6 +1296,12 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/@material-symbols/svg-400": {
+      "version": "0.44.6",
+      "resolved": "https://registry.npmjs.org/@material-symbols/svg-400/-/svg-400-0.44.6.tgz",
+      "integrity": "sha512-PKVFWhOWkXMJwcvJS4vjJD7TV8fMfvk0hvTBlP6quJDJGv9QXI1BFNkXx8f0SzM8pbhwqNEILTFba8PYiNCXuw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@mdi/js": {
       "version": "7.4.47",
       "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
@@ -12746,12 +12752,6 @@
         "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0"
       }
     },
-    "node_modules/vue-material-design-icons": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.3.1.tgz",
-      "integrity": "sha512-6UNEyhlTzlCeT8ZeX5WbpUGFTTPSbOoTQeoASTv7X4Ylh0pe8vltj+36VMK56KM0gG8EQVoMK/Qw/6evalg8lA==",
-      "license": "MIT"
-    },
     "node_modules/vue-resize": {
       "version": "2.0.0-alpha.1",
       "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
diff --git a/package.json b/package.json
index aa983a32b..d27b6cc4f 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "extends @nextcloud/browserslist-config"
   ],
   "dependencies": {
+    "@material-symbols/svg-400": "^0.44.6",
     "@nextcloud/auth": "^2.6.0",
     "@nextcloud/axios": "^2.6.0",
     "@nextcloud/dialogs": "^7.3.0",
@@ -46,7 +47,6 @@
     "qrcode": "^1.5.4",
     "vue": "^3.5.22",
     "vue-draggable-plus": "^0.6.1",
-    "vue-material-design-icons": "^5.3.1",
     "vue-router": "^4.6.0"
   },
   "devDependencies": {
diff --git a/src/Forms.vue b/src/Forms.vue
index af83b7e7e..9d2ceedc7 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -13,7 +13,7 @@
 				:text="t('forms', 'New form')"
 				@click="onNewForm">
 				<template #icon>
-					<IconPlus :size="20" decorative />
+					<NcIconSvgWrapper :svg="IconPlus" />
 				</template>
 			</NcAppNavigationNew>
 
@@ -64,7 +64,7 @@
 						wide
 						@click="showArchivedForms = true">
 						<template #icon>
-							<IconArchive :size="20" />
+							<NcIconSvgWrapper :svg="IconArchive" />
 						</template>
 						{{ t('forms', 'Archived forms') }}
 					</NcButton>
@@ -88,7 +88,7 @@
 				class="forms-emptycontent"
 				:name="t('forms', 'No forms created yet')">
 				<template #icon>
-					<FormsIcon :size="64" />
+					<NcIconSvgWrapper :svg="FormsIcon" :size="64" />
 				</template>
 				<template v-if="canCreateForms" #action>
 					<NcButton variant="primary" @click="onNewForm">
@@ -106,7 +106,7 @@
 						: t('forms', 'Please select a form')
 				">
 				<template #icon>
-					<FormsIcon :size="64" />
+					<NcIconSvgWrapper :svg="FormsIcon" :size="64" />
 				</template>
 				<template v-if="canCreateForms" #action>
 					<NcButton variant="primary" @click="onNewForm">
@@ -143,6 +143,8 @@
 </template>
 
 <script>
+import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
+import IconArchive from '@material-symbols/svg-400/outlined/archive.svg?raw'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
@@ -159,13 +161,12 @@ import NcAppNavigationNew from '@nextcloud/vue/components/NcAppNavigationNew'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcContent from '@nextcloud/vue/components/NcContent'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import IconArchive from 'vue-material-design-icons/ArchiveOutline.vue'
-import IconPlus from 'vue-material-design-icons/Plus.vue'
 import AppNavigationForm from './components/AppNavigationForm.vue'
 import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
-import FormsIcon from './components/Icons/FormsIcon.vue'
 import Sidebar from './views/Sidebar.vue'
+import FormsIcon from '../img/forms-dark.svg?raw'
 import PermissionTypes from './mixins/PermissionTypes.js'
 import { FormState } from './models/Constants.ts'
 import logger from './utils/Logger.js'
@@ -180,9 +181,7 @@ export default {
 	components: {
 		AppNavigationForm,
 		ArchivedFormsModal,
-		FormsIcon,
-		IconArchive,
-		IconPlus,
+		NcIconSvgWrapper,
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationCaption,
@@ -493,6 +492,9 @@ export default {
 			onCloneForm,
 			onDeleteForm,
 			onLastUpdatedByEventBus,
+			IconPlus,
+			IconArchive,
+			FormsIcon,
 		}
 	},
 }
diff --git a/src/FormsEmptyContent.vue b/src/FormsEmptyContent.vue
index c03e8d184..71836c83a 100644
--- a/src/FormsEmptyContent.vue
+++ b/src/FormsEmptyContent.vue
@@ -10,7 +10,7 @@
 				:name="currentModel.title"
 				:description="currentModel.description">
 				<template #icon>
-					<component :is="currentModel.icon" :size="64" />
+					<NcIconSvgWrapper :svg="currentModel.icon" :size="64" />
 				</template>
 			</NcEmptyContent>
 		</NcAppContent>
@@ -18,22 +18,22 @@
 </template>
 
 <script>
+import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
 import { loadState } from '@nextcloud/initial-state'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcContent from '@nextcloud/vue/components/NcContent'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
-import IconCheck from 'vue-material-design-icons/Check.vue'
-import FormsIcon from './components/Icons/FormsIcon.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import FormsIcon from '../img/forms-dark.svg?raw'
 
 export default {
 	name: 'FormsEmptyContent',
 
 	components: {
-		FormsIcon,
-		IconCheck,
 		NcAppContent,
 		NcContent,
 		NcEmptyContent,
+		NcIconSvgWrapper,
 	},
 
 	data() {
diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index 31c52352f..796473548 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -18,8 +18,8 @@
 		@click="mobileCloseNavigation">
 		<template #icon>
 			<NcLoadingIcon v-if="loading" :size="16" />
-			<IconCheck v-else-if="isExpired" :size="16" />
-			<FormsIcon v-else :size="16" />
+			<NcIconSvgWrapper v-else-if="isExpired" :svg="IconCheck" :size="16" />
+			<NcIconSvgWrapper v-else :svg="FormsIcon" :size="16" />
 		</template>
 		<template v-if="hasSubtitle" #subname>
 			{{ formSubtitle }}
@@ -34,7 +34,7 @@
 				:to="{ name: 'edit', params: { hash: form.hash } }"
 				@click="mobileCloseNavigation">
 				<template #icon>
-					<IconPencil :size="20" />
+					<NcIconSvgWrapper :svg="IconPencil" />
 				</template>
 				{{ t('forms', 'Edit form') }}
 			</NcActionRouter>
@@ -43,7 +43,7 @@
 				closeAfterClick
 				@click="onShareForm">
 				<template #icon>
-					<IconShareVariant :size="20" />
+					<NcIconSvgWrapper :svg="IconShareVariant" />
 				</template>
 				{{ t('forms', 'Share form') }}
 			</NcActionButton>
@@ -53,13 +53,13 @@
 				:to="{ name: 'results', params: { hash: form.hash } }"
 				@click="mobileCloseNavigation">
 				<template #icon>
-					<IconPoll :size="20" />
+					<NcIconSvgWrapper :svg="IconPoll" />
 				</template>
 				{{ t('forms', 'Responses') }}
 			</NcActionRouter>
 			<NcActionButton v-if="canEdit" closeAfterClick @click="onCloneForm">
 				<template #icon>
-					<IconContentCopy :size="20" />
+					<NcIconSvgWrapper :svg="IconContentCopy" />
 				</template>
 				{{ t('forms', 'Copy form') }}
 			</NcActionButton>
@@ -70,8 +70,11 @@
 				:disabled="isFormLocked"
 				@click="onToggleArchive">
 				<template #icon>
-					<IconArchiveOff v-if="isArchived" :size="20" />
-					<IconArchive v-else :size="20" />
+					<NcIconSvgWrapper
+						v-if="isArchived"
+						:svg="IconArchiveOff"
+						:size="20" />
+					<NcIconSvgWrapper v-else :svg="IconArchive" :size="20" />
 				</template>
 				{{
 					isArchived
@@ -85,7 +88,7 @@
 				:disabled="isFormLocked"
 				@click="onConfirmDelete">
 				<template #icon>
-					<IconDelete :size="20" />
+					<NcIconSvgWrapper :svg="IconDelete" />
 				</template>
 				{{ t('forms', 'Delete form') }}
 			</NcActionButton>
@@ -94,6 +97,14 @@
 </template>
 
 <script>
+import IconArchive from '@material-symbols/svg-400/outlined/archive.svg?raw'
+import IconPoll from '@material-symbols/svg-400/outlined/bar_chart.svg?raw'
+import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
+import IconContentCopy from '@material-symbols/svg-400/outlined/content_copy.svg?raw'
+import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
+import IconPencil from '@material-symbols/svg-400/outlined/edit.svg?raw'
+import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
+import IconArchiveOff from '@material-symbols/svg-400/outlined/unarchive.svg?raw'
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { showConfirmation, showError } from '@nextcloud/dialogs'
@@ -102,17 +113,10 @@ import { generateOcsUrl } from '@nextcloud/router'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionRouter from '@nextcloud/vue/components/NcActionRouter'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import IconArchiveOff from 'vue-material-design-icons/ArchiveOffOutline.vue'
-import IconArchive from 'vue-material-design-icons/ArchiveOutline.vue'
-import IconCheck from 'vue-material-design-icons/Check.vue'
-import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
-import IconPencil from 'vue-material-design-icons/PencilOutline.vue'
-import IconPoll from 'vue-material-design-icons/Poll.vue'
-import IconShareVariant from 'vue-material-design-icons/ShareVariantOutline.vue'
-import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
-import FormsIcon from './Icons/FormsIcon.vue'
+import FormsIcon from '../../img/forms-dark.svg?raw'
 import PermissionTypes from '../mixins/PermissionTypes.js'
 import { FormState } from '../models/Constants.ts'
 import logger from '../utils/Logger.js'
@@ -121,18 +125,10 @@ export default {
 	name: 'AppNavigationForm',
 
 	components: {
-		FormsIcon,
-		IconArchive,
-		IconArchiveOff,
-		IconCheck,
-		IconContentCopy,
-		IconDelete,
-		IconPencil,
-		IconPoll,
-		IconShareVariant,
 		NcActionButton,
 		NcActionRouter,
 		NcActionSeparator,
+		NcIconSvgWrapper,
 		NcListItem,
 		NcLoadingIcon,
 	},
@@ -161,6 +157,15 @@ export default {
 
 	data() {
 		return {
+			FormsIcon,
+			IconArchive,
+			IconArchiveOff,
+			IconCheck,
+			IconContentCopy,
+			IconDelete,
+			IconPencil,
+			IconPoll,
+			IconShareVariant,
 			loading: false,
 		}
 	},
diff --git a/src/components/Icons/FormsIcon.vue b/src/components/Icons/FormsIcon.vue
deleted file mode 100644
index edb415afc..000000000
--- a/src/components/Icons/FormsIcon.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2022 Jonas Rittershofer <jotoeri@users.noreply.github.com>
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<span
-		:aria-hidden="!title"
-		:aria-label="title"
-		class="material-design-icon forms-icon"
-		role="img"
-		v-bind="$attrs"
-		@click="$emit('click', $event)">
-		<svg
-			:fill="fillColor"
-			class="material-design-icon__svg"
-			:height="size"
-			:width="size"
-			viewBox="0 0 20 20">
-			<path
-				d="M9 19v-2h12v2H9Zm0-6v-2h12v2H9Zm0-6V5h12v2H9ZM5 20c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 3 18c0-.55.196-1.021.588-1.412A1.923 1.923 0 0 1 5 16c.55 0 1.021.196 1.413.588.391.391.587.862.587 1.412a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 5 20Zm0-6c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 3 12c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 5 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 5 14Zm0-6c-.55 0-1.021-.196-1.412-.588A1.923 1.923 0 0 1 3 6c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 5 4c.55 0 1.021.196 1.413.587C6.804 4.979 7 5.45 7 6s-.196 1.021-.587 1.412A1.927 1.927 0 0 1 5 8Z" />
-			<title v-if="title">{{ title }}</title>
-		</svg>
-	</span>
-</template>
-
-<script>
-export default {
-	name: 'FormsIcon',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-
-		fillColor: {
-			type: String,
-			default: 'currentColor',
-		},
-
-		size: {
-			type: Number,
-			default: 20,
-		},
-	},
-
-	emits: ['click'],
-}
-</script>
diff --git a/src/components/Icons/IconCopyAll.vue b/src/components/Icons/IconCopyAll.vue
deleted file mode 100644
index fb1fe16ad..000000000
--- a/src/components/Icons/IconCopyAll.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2022 Jonas Rittershofer <jotoeri@users.noreply.github.com>
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<span
-		:aria-hidden="!title"
-		:aria-label="title"
-		class="material-design-icon copy-all-icon"
-		role="img"
-		v-bind="$attrs"
-		@click="$emit('click', $event)">
-		<svg
-			:fill="fillColor"
-			class="material-design-icon__svg"
-			:height="size"
-			:width="size"
-			viewBox="0 0 16 16">
-			<path
-				d="M 13.5 0 h -8 C 4.67 0 4 0.67 4 1.5 v 10 C 4 12.33 4.67 13 5.5 13 h 8 c 0.83 0 1.5 -0.67 1.5 -1.5 v -10 C 15 0.67 14.33 0 13.5 0 z M 13.5 11.5 h -8 v -10 h 8 V 11.5 z M 1 10 v -1.5 h 1.5 V 10 H 1 z M 1 13 v -1.5 h 1.5 V 13 H 1 z M 7 14.5 h 1.5 V 16 H 7 V 14.5 z M 1 5.5 h 1.5 V 7 H 1 V 5.5 z M 5.5 16 H 4 v -1.5 h 1.5 V 16 z M 2.5 16 C 1.67 16 1 15.33 1 14.5 h 1.5 V 16 z M 2.5 4 H 1 c 0 -0.83 0.67 -1.5 1.5 -1.5 V 4 z M 11.49 14.5 c 0 0.83 -0.67 1.5 -1.5 1.5 h 0 v -1.5 L 11.49 14.5 L 11.49 14.5 z" />
-			<title v-if="title">{{ title }}</title>
-		</svg>
-	</span>
-</template>
-
-<script>
-export default {
-	name: 'IconCopyAll',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-
-		fillColor: {
-			type: String,
-			default: 'currentColor',
-		},
-
-		size: {
-			type: Number,
-			default: 20,
-		},
-	},
-
-	emits: ['click'],
-}
-</script>
diff --git a/src/components/Icons/IconDragIndicator.vue b/src/components/Icons/IconDragIndicator.vue
deleted file mode 100644
index 4790993ec..000000000
--- a/src/components/Icons/IconDragIndicator.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2025 Christian Hartmann <chris-hartmann@gmx.de>
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<span
-		:aria-hidden="!title"
-		:aria-label="title"
-		class="material-design-icon drag-indicator-icon"
-		role="img"
-		v-bind="$attrs"
-		@click="$emit('click', $event)">
-		<svg
-			:fill="fillColor"
-			class="material-design-icon__svg"
-			:height="size"
-			:width="size"
-			viewBox="0 -960 960 960">
-			<path
-				d="M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160Zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160ZM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400Zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400ZM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640Zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640Z" />
-			<title v-if="title">{{ title }}</title>
-		</svg>
-	</span>
-</template>
-
-<script>
-export default {
-	name: 'IconDragIndicator',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-
-		fillColor: {
-			type: String,
-			default: 'currentColor',
-		},
-
-		size: {
-			type: Number,
-			default: 20,
-		},
-	},
-
-	emits: ['click'],
-}
-</script>
diff --git a/src/components/Icons/IconLinearScale.vue b/src/components/Icons/IconLinearScale.vue
deleted file mode 100644
index 39b79af15..000000000
--- a/src/components/Icons/IconLinearScale.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2025 Christian Hartmann <chris-hartmann@gmx.de>
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<span
-		:aria-hidden="!title"
-		:aria-label="title"
-		class="material-design-icon linear-scale-icon"
-		role="img"
-		v-bind="$attrs"
-		@click="$emit('click', $event)">
-		<svg
-			:fill="fillColor"
-			class="material-design-icon__svg"
-			:height="size"
-			:width="size"
-			viewBox="0 -960 960 960">
-			<path
-				d="M672-288q-71 0-123.38-44.36Q496.24-376.73 482.9-444H281q-11 26-35 43t-54 17q-40.32 0-68.16-27.77Q96-439.55 96-479.77 96-520 123.84-548q27.84-28 68.16-28 30 0 54 17t35.46 43H484q13.21-67.28 65.1-111.64Q601-672 672-672q79.68 0 135.84 56.23 56.16 56.22 56.16 136Q864-400 807.84-344 751.68-288 672-288Zm0-72q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z" />
-			<title v-if="title">{{ title }}</title>
-		</svg>
-	</span>
-</template>
-
-<script>
-export default {
-	name: 'IconLinearScale',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-
-		fillColor: {
-			type: String,
-			default: 'currentColor',
-		},
-
-		size: {
-			type: Number,
-			default: 20,
-		},
-	},
-
-	emits: ['click'],
-}
-</script>
diff --git a/src/components/Icons/IconPalette.vue b/src/components/Icons/IconPalette.vue
deleted file mode 100644
index 3dfef6d5a..000000000
--- a/src/components/Icons/IconPalette.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2025 Christian Hartmann <chris-hartmann@gmx.de>
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<span
-		:aria-hidden="!title"
-		:aria-label="title"
-		class="material-design-icon palette-icon"
-		role="img"
-		v-bind="$attrs"
-		@click="$emit('click', $event)">
-		<svg
-			:fill="fillColor"
-			class="material-design-icon__svg"
-			:height="size"
-			:width="size"
-			viewBox="0 -960 960 960">
-			<path
-				d="M480-96q-78.72 0-148.8-30.24-70.08-30.24-122.4-82.56-52.32-52.32-82.56-122.4Q96-401.28 96-480q0-80 30.5-149.5t84-122Q264-804 335.5-834t152.75-30q77.39 0 146.07 27Q703-810 754-763t80.5 110Q864-590 864-518q0 96-67.08 163-67.09 67-162.92 67h-67.76q-8.24 0-14.24 5t-6 12.67Q546-255 561-245q15 10 15 53 0 37-27 66.5T480-96ZM264-444q25 0 42.5-17.5T324-504q0-25-17.5-42.5T264-564q-25 0-42.5 17.5T204-504q0 25 17.5 42.5T264-444Zm120-144q25 0 42.5-17.5T444-648q0-25-17.5-42.5T384-708q-25 0-42.5 17.5T324-648q0 25 17.5 42.5T384-588Zm192 0q25 0 42.5-17.5T636-648q0-25-17.5-42.5T576-708q-25 0-42.5 17.5T516-648q0 25 17.5 42.5T576-588Zm120 144q25 0 42.5-17.5T756-504q0-25-17.5-42.5T696-564q-25 0-42.5 17.5T636-504q0 25 17.5 42.5T696-444Z" />
-			<title v-if="title">{{ title }}</title>
-		</svg>
-	</span>
-</template>
-
-<script>
-export default {
-	name: 'IconPalette',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-
-		fillColor: {
-			type: String,
-			default: 'currentColor',
-		},
-
-		size: {
-			type: Number,
-			default: 20,
-		},
-	},
-
-	emits: ['click'],
-}
-</script>
diff --git a/src/components/PaginationToolbar.vue b/src/components/PaginationToolbar.vue
index 0660d1de5..be27e6002 100644
--- a/src/components/PaginationToolbar.vue
+++ b/src/components/PaginationToolbar.vue
@@ -12,7 +12,7 @@
 				:aria-label="t('forms', 'Go to first page')"
 				@click="pageNumber = 1">
 				<template #icon>
-					<PageFirstIcon :size="20" />
+					<NcIconSvgWrapper :svg="PageFirstIcon" />
 				</template>
 			</NcButton>
 			<NcButton
@@ -21,7 +21,7 @@
 				:aria-label="t('forms', 'Go to previous page')"
 				@click="pageNumber--">
 				<template #icon>
-					<IconChevronLeft :size="20" />
+					<NcIconSvgWrapper :svg="IconChevronLeft" />
 				</template>
 			</NcButton>
 			<div class="page-number">
@@ -47,7 +47,7 @@
 				:aria-label="t('forms', 'Go to next page')"
 				@click="pageNumber++">
 				<template #icon>
-					<IconChevronRight :size="20" />
+					<NcIconSvgWrapper :svg="IconChevronRight" />
 				</template>
 			</NcButton>
 			<NcButton
@@ -56,7 +56,7 @@
 				:aria-label="t('forms', 'Go to last page')"
 				@click="pageNumber = totalPages">
 				<template #icon>
-					<PageLastIcon :size="20" />
+					<NcIconSvgWrapper :svg="PageLastIcon" />
 				</template>
 			</NcButton>
 		</div>
@@ -64,22 +64,20 @@
 </template>
 
 <script>
+import IconChevronLeft from '@material-symbols/svg-400/outlined/chevron_left.svg?raw'
+import IconChevronRight from '@material-symbols/svg-400/outlined/chevron_right.svg?raw'
+import PageFirstIcon from '@material-symbols/svg-400/outlined/first_page.svg?raw'
+import PageLastIcon from '@material-symbols/svg-400/outlined/last_page.svg?raw'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
-import IconChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
-import IconChevronRight from 'vue-material-design-icons/ChevronRight.vue'
-import PageFirstIcon from 'vue-material-design-icons/PageFirst.vue'
-import PageLastIcon from 'vue-material-design-icons/PageLast.vue'
 
 export default {
 	name: 'PaginationToolbar',
 	components: {
-		IconChevronLeft,
-		IconChevronRight,
+		NcIconSvgWrapper,
 		NcButton,
 		NcSelect,
-		PageFirstIcon,
-		PageLastIcon,
 	},
 
 	props: {
@@ -101,6 +99,15 @@ export default {
 
 	emits: ['update:offset'],
 
+	data() {
+		return {
+			IconChevronLeft,
+			IconChevronRight,
+			PageFirstIcon,
+			PageLastIcon,
+		}
+	},
+
 	computed: {
 		allPageNumbersArray() {
 			return Array.from(
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index a40b36dea..3e30d46de 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -5,9 +5,9 @@
 
 <template>
 	<li class="question__item" @focusout="handleTabbing">
-		<component
-			:is="pseudoIcon"
+		<NcIconSvgWrapper
 			v-if="!isDropdown"
+			:svg="pseudoIcon"
 			class="question__item__pseudoInput" />
 		<input
 			ref="input"
@@ -34,14 +34,14 @@
 				class="option__drag-handle"
 				variant="tertiary-no-background">
 				<template #icon>
-					<IconDragIndicator :size="20" />
+					<NcIconSvgWrapper :svg="IconDragIndicator" />
 				</template>
 				<NcActionButton
 					ref="buttonOptionUp"
 					:disabled="index === 0"
 					@click="onMoveUp">
 					<template #icon>
-						<IconArrowUp :size="20" />
+						<NcIconSvgWrapper :svg="IconArrowUp" />
 					</template>
 					{{ t('forms', 'Move option up') }}
 				</NcActionButton>
@@ -50,7 +50,7 @@
 					:disabled="index === maxIndex"
 					@click="onMoveDown">
 					<template #icon>
-						<IconArrowDown :size="20" />
+						<NcIconSvgWrapper :svg="IconArrowDown" />
 					</template>
 					{{ t('forms', 'Move option down') }}
 				</NcActionButton>
@@ -60,7 +60,7 @@
 				variant="tertiary"
 				@click="deleteEntry">
 				<template #icon>
-					<IconDelete :size="20" />
+					<NcIconSvgWrapper :svg="IconDelete" />
 				</template>
 			</NcButton>
 		</div>
@@ -71,7 +71,7 @@
 				:disabled="isIMEComposing || !canCreateLocalAnswer"
 				@click="createLocalAnswer">
 				<template #icon>
-					<IconPlus :size="20" />
+					<NcIconSvgWrapper :svg="IconPlus" />
 				</template>
 			</NcButton>
 		</div>
@@ -79,6 +79,15 @@
 </template>
 
 <script>
+import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
+import IconCheckboxBlankOutline from '@material-symbols/svg-400/outlined/check_box_outline_blank.svg?raw'
+import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
+import IconDragIndicator from '@material-symbols/svg-400/outlined/drag_indicator.svg?raw'
+import IconArrowDown from '@material-symbols/svg-400/outlined/keyboard_arrow_down.svg?raw'
+import IconArrowUp from '@material-symbols/svg-400/outlined/keyboard_arrow_up.svg?raw'
+import IconRadioboxBlank from '@material-symbols/svg-400/outlined/radio_button_unchecked.svg?raw'
+import IconTableColumn from '@material-symbols/svg-400/outlined/view_column.svg?raw'
+import IconTableRow from '@material-symbols/svg-400/outlined/view_stream.svg?raw'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { generateOcsUrl } from '@nextcloud/router'
@@ -88,15 +97,7 @@ import { markRaw } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
-import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
-import IconCheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'
-import IconPlus from 'vue-material-design-icons/Plus.vue'
-import IconRadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'
-import IconTableColumn from 'vue-material-design-icons/TableColumn.vue'
-import IconTableRow from 'vue-material-design-icons/TableRow.vue'
-import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
-import IconDragIndicator from '../Icons/IconDragIndicator.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import { INPUT_DEBOUNCE_MS, OptionType } from '../../models/Constants.ts'
 import logger from '../../utils/Logger.js'
 import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
@@ -105,15 +106,7 @@ export default {
 	name: 'AnswerInput',
 
 	components: {
-		IconArrowDown,
-		IconArrowUp,
-		IconCheckboxBlankOutline,
-		IconDelete,
-		IconDragIndicator,
-		IconPlus,
-		IconRadioboxBlank,
-		IconTableColumn,
-		IconTableRow,
+		NcIconSvgWrapper,
 		NcActions,
 		NcActionButton,
 		NcButton,
@@ -177,6 +170,10 @@ export default {
 			debounceOnInput: null,
 			isIMEComposing: false,
 			localText: this.answer?.text ?? '',
+			IconArrowDown,
+			IconArrowUp,
+			IconDelete,
+			IconDragIndicator,
 		}
 	},
 
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 4fe673ec0..248f1ec2c 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -26,10 +26,10 @@
 				variant="tertiary-no-background"
 				@click.stop="onMoveUp">
 				<template #icon>
-					<IconArrowUp :size="20" />
+					<NcIconSvgWrapper :svg="IconArrowUp" />
 				</template>
 			</NcButton>
-			<IconDragIndicator :size="20" />
+			<NcIconSvgWrapper :svg="IconDragIndicator" />
 			<NcButton
 				ref="buttonDown"
 				:aria-label="t('forms', 'Move question down')"
@@ -38,7 +38,7 @@
 				variant="tertiary-no-background"
 				@click.stop="onMoveDown">
 				<template #icon>
-					<IconArrowDown :size="20" />
+					<NcIconSvgWrapper :svg="IconArrowDown" />
 				</template>
 			</NcButton>
 		</div>
@@ -74,7 +74,7 @@
 					:title="warningInvalid"
 					class="question__header__title__warning"
 					tabindex="0">
-					<IconAlertCircleOutline :size="20" />
+					<NcIconSvgWrapper :svg="IconAlertCircleOutline" />
 				</div>
 				<NcActions
 					v-if="!readOnly"
@@ -85,9 +85,9 @@
 					<template v-if="isRequired" #icon>
 						<IconOverlay>
 							<template #overlay>
-								<IconAsterisk :size="20" />
+								<NcIconSvgWrapper :svg="IconAsterisk" />
 							</template>
-							<IconDotsHorizontal :size="20" />
+							<NcIconSvgWrapper :svg="IconDotsHorizontal" />
 						</IconOverlay>
 					</template>
 					<NcActionCheckbox
@@ -104,19 +104,19 @@
 						:modelValue="name"
 						@input="onNameChange">
 						<template #icon>
-							<IconIdentifier :size="20" />
+							<NcIconSvgWrapper :svg="IconIdentifier" />
 						</template>
 						{{ t('forms', 'Technical name') }}
 					</NcActionInput>
 					<NcActionButton closeAfterClick @click="onClone">
 						<template #icon>
-							<IconContentCopy :size="20" />
+							<NcIconSvgWrapper :svg="IconContentCopy" />
 						</template>
 						{{ t('forms', 'Copy question') }}
 					</NcActionButton>
 					<NcActionButton @click="onDelete">
 						<template #icon>
-							<IconDelete :size="20" />
+							<NcIconSvgWrapper :svg="IconDelete" />
 						</template>
 						{{ t('forms', 'Delete question') }}
 					</NcActionButton>
@@ -158,21 +158,22 @@
 </template>
 
 <script>
+import IconAsterisk from '@material-symbols/svg-400/outlined/asterisk.svg?raw'
+import IconIdentifier from '@material-symbols/svg-400/outlined/badge.svg?raw'
+import IconContentCopy from '@material-symbols/svg-400/outlined/content_copy.svg?raw'
+import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
+import IconDragIndicator from '@material-symbols/svg-400/outlined/drag_indicator.svg?raw'
+import IconAlertCircleOutline from '@material-symbols/svg-400/outlined/error.svg?raw'
+import IconArrowDown from '@material-symbols/svg-400/outlined/keyboard_arrow_down.svg?raw'
+import IconArrowUp from '@material-symbols/svg-400/outlined/keyboard_arrow_up.svg?raw'
+import IconDotsHorizontal from '@material-symbols/svg-400/outlined/more_horiz.svg?raw'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
-import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
-import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
-import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
-import IconAsterisk from 'vue-material-design-icons/Asterisk.vue'
-import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
-import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
-import IconIdentifier from 'vue-material-design-icons/Identifier.vue'
-import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
-import IconDragIndicator from '../Icons/IconDragIndicator.vue'
 import IconOverlay from '../Icons/IconOverlay.vue'
 
 export default {
@@ -180,15 +181,7 @@ export default {
 	name: 'Question',
 
 	components: {
-		IconAlertCircleOutline,
-		IconArrowDown,
-		IconArrowUp,
-		IconAsterisk,
-		IconContentCopy,
-		IconDelete,
-		IconDotsHorizontal,
-		IconDragIndicator,
-		IconIdentifier,
+		NcIconSvgWrapper,
 		IconOverlay,
 		NcActions,
 		NcActionButton,
@@ -283,6 +276,20 @@ export default {
 		'clone',
 	],
 
+	data() {
+		return {
+			IconAsterisk,
+			IconAlertCircleOutline,
+			IconArrowDown,
+			IconArrowUp,
+			IconContentCopy,
+			IconDelete,
+			IconDotsHorizontal,
+			IconDragIndicator,
+			IconIdentifier,
+		}
+	},
+
 	computed: {
 		/**
 		 * Extend text with asterisk if question is required
diff --git a/src/components/Questions/QuestionColor.vue b/src/components/Questions/QuestionColor.vue
index b3658614e..7bd7f9c37 100644
--- a/src/components/Questions/QuestionColor.vue
+++ b/src/components/Questions/QuestionColor.vue
@@ -30,7 +30,7 @@
 					variant="tertiary"
 					@click="onUpdatePickedColor('')">
 					<template #icon>
-						<IconClose :size="20" />
+						<NcIconSvgWrapper :svg="IconClose" />
 					</template>
 				</NcButton>
 			</div>
@@ -39,9 +39,10 @@
 </template>
 
 <script>
+import IconClose from '@material-symbols/svg-400/outlined/close.svg?raw'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcColorPicker from '@nextcloud/vue/components/NcColorPicker'
-import IconClose from 'vue-material-design-icons/Close.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import Question from './Question.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 
@@ -49,7 +50,7 @@ export default {
 	name: 'QuestionColor',
 
 	components: {
-		IconClose,
+		NcIconSvgWrapper,
 		NcButton,
 		NcColorPicker,
 		Question,
@@ -61,6 +62,7 @@ export default {
 	data() {
 		return {
 			isLoading: false,
+			IconClose,
 		}
 	},
 
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index 25f02e01b..2dbfe0527 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -19,7 +19,7 @@
 			</NcActionCheckbox>
 			<NcActionButton closeAfterClick @click="isOptionDialogShown = true">
 				<template #icon>
-					<IconContentPaste :size="20" />
+					<NcIconSvgWrapper :svg="IconContentPaste" />
 				</template>
 				{{ t('forms', 'Add multiple options') }}
 			</NcActionButton>
@@ -93,12 +93,13 @@
 </template>
 
 <script>
+import IconContentPaste from '@material-symbols/svg-400/outlined/content_paste.svg?raw'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
-import IconContentPaste from 'vue-material-design-icons/ContentPaste.vue'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
@@ -112,7 +113,7 @@ export default {
 	components: {
 		AnswerInput,
 		Draggable,
-		IconContentPaste,
+		NcIconSvgWrapper,
 		NcActionButton,
 		NcActionCheckbox,
 		NcLoadingIcon,
@@ -130,6 +131,7 @@ export default {
 			isLoading: false,
 			isOptionDialogShown: false,
 			OptionType,
+			IconContentPaste,
 		}
 	},
 
diff --git a/src/components/Questions/QuestionFile.vue b/src/components/Questions/QuestionFile.vue
index a4e85bea3..2dc509beb 100644
--- a/src/components/Questions/QuestionFile.vue
+++ b/src/components/Questions/QuestionFile.vue
@@ -14,7 +14,7 @@
 			<template v-if="!allowedFileTypesDialogOpened">
 				<NcActionButton isMenu @click="allowedFileTypesDialogOpened = true">
 					<template #icon>
-						<IconFileDocumentAlert :size="20" />
+						<NcIconSvgWrapper :svg="IconFileDocumentAlert" />
 					</template>
 					{{ allowedFileTypesLabel }}
 				</NcActionButton>
@@ -25,7 +25,7 @@
 
 				<NcActionButton @click="allowedFileTypesDialogOpened = false">
 					<template #icon>
-						<IconChevronLeft :size="20" />
+						<NcIconSvgWrapper :svg="IconChevronLeft" />
 					</template>
 					{{ t('forms', 'Allow only specific file types') }}
 				</NcActionButton>
@@ -87,7 +87,7 @@
 					:name="uploadedFile.fileName"
 					compact>
 					<template #icon>
-						<IconFile :size="20" />
+						<NcIconSvgWrapper :svg="IconFile" />
 					</template>
 
 					<template #actions>
@@ -96,7 +96,7 @@
 								onDeleteUploadedFile(uploadedFile.uploadedFileId)
 							">
 							<template #icon>
-								<IconDelete :size="20" />
+								<NcIconSvgWrapper :svg="IconDelete" />
 							</template>
 							{{ t('forms', 'Delete') }}
 						</NcActionButton>
@@ -131,10 +131,10 @@
 							variant="tertiary-no-background"
 							@click="toggleFileInput">
 							<template #icon>
-								<IconUploadMultiple
+								<NcIconSvgWrapper
 									v-if="maxAllowedFilesCount > 1"
-									:size="20" />
-								<IconUpload v-else :size="20" />
+									:svg="IconUploadMultiple" />
+								<NcIconSvgWrapper v-else :svg="IconUpload" />
 							</template>
 						</NcButton>
 					</div>
@@ -145,6 +145,12 @@
 </template>
 
 <script>
+import IconChevronLeft from '@material-symbols/svg-400/outlined/chevron_left.svg?raw'
+import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
+import IconFile from '@material-symbols/svg-400/outlined/draft.svg?raw'
+import IconFileDocumentAlert from '@material-symbols/svg-400/outlined/quick_reference.svg?raw'
+import IconUpload from '@material-symbols/svg-400/outlined/upload.svg?raw'
+import IconUploadMultiple from '@material-symbols/svg-400/outlined/upload_file.svg?raw'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
@@ -155,14 +161,9 @@ import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import IconChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
-import IconFileDocumentAlert from 'vue-material-design-icons/FileDocumentAlertOutline.vue'
-import IconFile from 'vue-material-design-icons/FileOutline.vue'
-import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
-import IconUpload from 'vue-material-design-icons/TrayArrowUp.vue'
-import IconUploadMultiple from 'vue-material-design-icons/UploadMultipleOutline.vue'
 import Question from './Question.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import fileTypes from '../../models/FileTypes.js'
@@ -188,12 +189,7 @@ const FILE_SIZE_UNITS = {
 export default {
 	name: 'QuestionFile',
 	components: {
-		IconChevronLeft,
-		IconDelete,
-		IconFile,
-		IconFileDocumentAlert,
-		IconUpload,
-		IconUploadMultiple,
+		NcIconSvgWrapper,
 		NcActionButton,
 		NcActionCheckbox,
 		NcActionInput,
@@ -214,6 +210,12 @@ export default {
 			maxFileSizeUnit: Object.keys(FILE_SIZE_UNITS)[0],
 			maxFileSizeValue: '',
 			allowedFileTypesDialogOpened: false,
+			IconChevronLeft,
+			IconDelete,
+			IconFile,
+			IconFileDocumentAlert,
+			IconUpload,
+			IconUploadMultiple,
 		}
 	},
 
diff --git a/src/components/Questions/QuestionLinearScale.vue b/src/components/Questions/QuestionLinearScale.vue
index 735fa2f5b..d4d3d118c 100644
--- a/src/components/Questions/QuestionLinearScale.vue
+++ b/src/components/Questions/QuestionLinearScale.vue
@@ -20,7 +20,7 @@
 				required
 				@update:modelValue="onOptionsLowestChange">
 				<template #icon>
-					<IconPencil :size="20" />
+					<NcIconSvgWrapper :svg="IconPencil" />
 				</template>
 			</NcActionInput>
 			<NcActionInput
@@ -33,7 +33,7 @@
 				required
 				@update:modelValue="onOptionsHighestChange">
 				<template #icon>
-					<IconPencil :size="20" />
+					<NcIconSvgWrapper :svg="IconPencil" />
 				</template>
 			</NcActionInput>
 		</template>
@@ -111,11 +111,12 @@
 </template>
 
 <script>
+import IconPencil from '@material-symbols/svg-400/outlined/edit.svg?raw'
 import { t } from '@nextcloud/l10n'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
-import IconPencil from 'vue-material-design-icons/PencilOutline.vue'
 import Question from './Question.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 
@@ -123,7 +124,7 @@ export default {
 	name: 'QuestionLinearScale',
 
 	components: {
-		IconPencil,
+		NcIconSvgWrapper,
 		NcActionInput,
 		NcCheckboxRadioSwitch,
 		NcTextArea,
@@ -136,6 +137,7 @@ export default {
 	data() {
 		return {
 			isLoading: false,
+			IconPencil,
 		}
 	},
 
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 50e6741f5..1d226f74d 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -63,7 +63,7 @@
 			</template>
 			<NcActionButton closeAfterClick @click="isOptionDialogShown = true">
 				<template #icon>
-					<IconContentPaste :size="20" />
+					<NcIconSvgWrapper :svg="IconContentPaste" />
 				</template>
 				{{ t('forms', 'Add multiple options') }}
 			</NcActionButton>
@@ -155,7 +155,9 @@
 				v-if="allowOtherAnswer"
 				key="option-add-other"
 				class="question__item">
-				<component :is="pseudoIcon" class="question__item__pseudoInput" />
+				<NcIconSvgWrapper
+					:svg="pseudoIcon"
+					class="question__item__pseudoInput" />
 				<input
 					:placeholder="t('forms', 'Other')"
 					class="question__input"
@@ -175,6 +177,9 @@
 </template>
 
 <script>
+import IconCheckboxBlankOutline from '@material-symbols/svg-400/outlined/check_box_outline_blank.svg?raw'
+import IconContentPaste from '@material-symbols/svg-400/outlined/content_paste.svg?raw'
+import IconRadioboxBlank from '@material-symbols/svg-400/outlined/radio_button_unchecked.svg?raw'
 import { showError } from '@nextcloud/dialogs'
 import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
@@ -182,11 +187,9 @@ import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import IconCheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'
-import IconContentPaste from 'vue-material-design-icons/ContentPaste.vue'
-import IconRadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
@@ -203,9 +206,7 @@ export default {
 	components: {
 		AnswerInput,
 		Draggable,
-		IconCheckboxBlankOutline,
-		IconContentPaste,
-		IconRadioboxBlank,
+		NcIconSvgWrapper,
 		NcActionButton,
 		NcActionCheckbox,
 		NcActionInput,
@@ -233,6 +234,10 @@ export default {
 			isLoading: false,
 
 			OptionType,
+
+			IconCheckboxBlankOutline,
+			IconContentPaste,
+			IconRadioboxBlank,
 		}
 	},
 
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index b14514440..537e413c9 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -61,7 +61,7 @@
 					@input="onInputRegex"
 					@submit="onSubmitRegex">
 					<template #icon>
-						<IconRegex :size="20" />
+						<NcIconSvgWrapper :svg="IconRegex" />
 					</template>
 					/^[a-z]{3}$/i
 					<!-- ^ Some example RegExp for the placeholder text -->
@@ -72,10 +72,11 @@
 </template>
 
 <script>
+import IconRegex from '@material-symbols/svg-400/outlined/regular_expression.svg?raw'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcActionRadio from '@nextcloud/vue/components/NcActionRadio'
 import NcActions from '@nextcloud/vue/components/NcActions'
-import IconRegex from 'vue-material-design-icons/Regex.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import Question from './Question.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import validationTypes from '../../models/ValidationTypes.js'
@@ -85,7 +86,7 @@ export default {
 	name: 'QuestionShort',
 
 	components: {
-		IconRegex,
+		NcIconSvgWrapper,
 		NcActions,
 		NcActionInput,
 		NcActionRadio,
@@ -99,6 +100,7 @@ export default {
 		return {
 			validationTypes,
 			isValidationTypeMenuOpen: false,
+			IconRegex,
 		}
 	},
 
diff --git a/src/components/Results/Answer.vue b/src/components/Results/Answer.vue
index 964e5c987..21446099a 100644
--- a/src/components/Results/Answer.vue
+++ b/src/components/Results/Answer.vue
@@ -17,7 +17,7 @@
 				class="answer__text"
 				dir="auto">
 				<a :href="answer.url" target="_blank">
-					<IconFile :size="20" class="answer__text-icon" />
+					<NcIconSvgWrapper :svg="IconFile" inline />
 					<NcHighlight :text="answer.text" :search="highlight" />
 				</a>
 			</p>
@@ -78,16 +78,17 @@
 </template>
 
 <script>
+import IconFile from '@material-symbols/svg-400/outlined/draft.svg?raw'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcHighlight from '@nextcloud/vue/components/NcHighlight'
-import IconFile from 'vue-material-design-icons/FileOutline.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 
 export default {
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Answer',
 	components: {
 		NcCheckboxRadioSwitch,
-		IconFile,
+		NcIconSvgWrapper,
 		NcHighlight,
 	},
 
@@ -144,6 +145,12 @@ export default {
 			default: '',
 		},
 	},
+
+	data() {
+		return {
+			IconFile,
+		}
+	},
 }
 </script>
 
@@ -158,12 +165,6 @@ export default {
 
 	&__text {
 		white-space: pre-line;
-
-		&-icon {
-			display: inline-flex;
-			position: relative;
-			top: 4px;
-		}
 	}
 
 	.color__field {
diff --git a/src/components/Results/ResultsSummary.vue b/src/components/Results/ResultsSummary.vue
index 404cf869c..4652a8f74 100644
--- a/src/components/Results/ResultsSummary.vue
+++ b/src/components/Results/ResultsSummary.vue
@@ -90,7 +90,7 @@
 			<li v-for="(answer, index) in answers" :key="answer.id" dir="auto">
 				<template v-if="answer.url">
 					<a :href="answer.url" target="_blank">
-						<IconFile :size="20" class="question-summary__text-icon" />
+						<NcIconSvgWrapper :svg="IconFile" inline />
 						{{ answer.text }}
 					</a>
 				</template>
@@ -116,8 +116,9 @@
 </template>
 
 <script>
+import IconFile from '@material-symbols/svg-400/outlined/draft.svg?raw'
 import { generateUrl } from '@nextcloud/router'
-import IconFile from 'vue-material-design-icons/FileOutline.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import answerTypes from '../../models/AnswerTypes.js'
 import { GridCellType, OptionType } from '../../models/Constants.ts'
 
@@ -125,7 +126,7 @@ export default {
 	name: 'ResultsSummary',
 
 	components: {
-		IconFile,
+		NcIconSvgWrapper,
 	},
 
 	props: {
@@ -143,6 +144,7 @@ export default {
 	data() {
 		return {
 			answerTypes,
+			IconFile,
 		}
 	},
 
@@ -517,12 +519,6 @@ export default {
 				font-weight: bold;
 			}
 		}
-
-		&-icon {
-			display: inline-flex;
-			position: relative;
-			top: 4px;
-		}
 	}
 
 	&__statistic {
diff --git a/src/components/Results/Submission.vue b/src/components/Results/Submission.vue
index 4ec91c6db..48c0709df 100644
--- a/src/components/Results/Submission.vue
+++ b/src/components/Results/Submission.vue
@@ -17,13 +17,13 @@
 						params: { hash: formHash, submissionId: submission.id },
 					}">
 					<template #icon>
-						<IconPencil :size="20" />
+						<NcIconSvgWrapper :svg="IconPencil" />
 					</template>
 					{{ t('forms', 'Edit this response') }}
 				</NcActionRouter>
 				<NcActionButton v-if="canDeleteSubmission" @click="onDelete">
 					<template #icon>
-						<IconDelete :size="20" />
+						<NcIconSvgWrapper :svg="IconDelete" />
 					</template>
 					{{ t('forms', 'Delete this response') }}
 				</NcActionButton>
@@ -49,13 +49,14 @@
 </template>
 
 <script>
+import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
+import IconPencil from '@material-symbols/svg-400/outlined/edit.svg?raw'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionRouter from '@nextcloud/vue/components/NcActionRouter'
 import NcActions from '@nextcloud/vue/components/NcActions'
-import IconPencil from 'vue-material-design-icons/PencilOutline.vue'
-import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import Answer from './Answer.vue'
 import { OptionType } from '../../models/Constants.ts'
 
@@ -65,8 +66,7 @@ export default {
 
 	components: {
 		Answer,
-		IconDelete,
-		IconPencil,
+		NcIconSvgWrapper,
 		NcActions,
 		NcActionButton,
 		NcActionRouter,
@@ -106,6 +106,13 @@ export default {
 
 	emits: ['delete'],
 
+	data() {
+		return {
+			IconDelete,
+			IconPencil,
+		}
+	},
+
 	computed: {
 		// Format submission-timestamp to DateTime
 		submissionDateTime() {
diff --git a/src/components/SidebarTabs/SharingShareDiv.vue b/src/components/SidebarTabs/SharingShareDiv.vue
index 0e8f2e417..c312b5601 100644
--- a/src/components/SidebarTabs/SharingShareDiv.vue
+++ b/src/components/SidebarTabs/SharingShareDiv.vue
@@ -37,7 +37,7 @@
 			<NcActionSeparator />
 			<NcActionButton :disabled="locked" @click="removeShare">
 				<template #icon>
-					<IconClose :size="20" />
+					<NcIconSvgWrapper :svg="IconClose" />
 				</template>
 				{{ t('forms', 'Delete') }}
 			</NcActionButton>
@@ -46,19 +46,20 @@
 </template>
 
 <script>
+import IconClose from '@material-symbols/svg-400/outlined/close.svg?raw'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCaption from '@nextcloud/vue/components/NcActionCaption'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
-import IconClose from 'vue-material-design-icons/Close.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import PermissionTypes from '../../mixins/PermissionTypes.js'
 import ShareTypes from '../../mixins/ShareTypes.js'
 
 export default {
 	components: {
-		IconClose,
+		NcIconSvgWrapper,
 		NcActions,
 		NcActionButton,
 		NcActionCaption,
@@ -88,6 +89,12 @@ export default {
 
 	emits: ['removeShare', 'update:share'],
 
+	data() {
+		return {
+			IconClose,
+		}
+	},
+
 	computed: {
 		canAccessResults() {
 			return this.share.permissions.includes(
diff --git a/src/components/SidebarTabs/SharingSidebarTab.vue b/src/components/SidebarTabs/SharingSidebarTab.vue
index 07fdd32fc..d14aaf3b6 100644
--- a/src/components/SidebarTabs/SharingSidebarTab.vue
+++ b/src/components/SidebarTabs/SharingSidebarTab.vue
@@ -28,7 +28,7 @@
 			v-if="!hasPublicLink && appConfig.allowPublicLink"
 			class="share-div share-div--link">
 			<div class="share-div__avatar">
-				<IconLinkVariant :size="20" />
+				<NcIconSvgWrapper :svg="IconLinkVariant" />
 			</div>
 			<span class="share-div__desc">{{ t('forms', 'Share link') }}</span>
 			<NcActions>
@@ -36,7 +36,7 @@
 					:disabled="locked || !isCurrentUserOwner"
 					@click="addPublicLink">
 					<template #icon>
-						<IconPlus :size="20" />
+						<NcIconSvgWrapper :svg="IconPlus" />
 					</template>
 					{{ t('forms', 'Add link') }}
 				</NcActionButton>
@@ -50,8 +50,10 @@
 				class="share-div share-div--link"
 				:class="{ 'share-div--embeddable': isEmbeddingAllowed(share) }">
 				<div class="share-div__avatar">
-					<IconLinkBoxVariantOutline v-if="isEmbeddable" :size="20" />
-					<IconLinkVariant v-else :size="20" />
+					<NcIconSvgWrapper
+						v-if="isEmbeddable"
+						:svg="IconLinkBoxVariantOutline" />
+					<NcIconSvgWrapper v-else :svg="IconLinkVariant" />
 				</div>
 				<span class="share-div__desc">{{
 					isEmbeddable
@@ -69,7 +71,7 @@
 					</NcActionLink>
 					<NcActionButton @click="openQrDialog(share)">
 						<template #icon>
-							<IconQr :size="20" />
+							<NcIconSvgWrapper :svg="IconQr" />
 						</template>
 						{{ t('forms', 'Show QR code') }}
 					</NcActionButton>
@@ -77,7 +79,7 @@
 						v-if="isEmbeddable"
 						@click="copyEmbeddingCode(share)">
 						<template #icon>
-							<IconCodeBrackets :size="20" />
+							<NcIconSvgWrapper :svg="IconCodeBrackets" />
 						</template>
 						{{ t('forms', 'Copy embedding code') }}
 					</NcActionButton>
@@ -86,7 +88,7 @@
 						:disabled="locked || !isCurrentUserOwner"
 						@click="makeEmbeddable(share)">
 						<template #icon>
-							<IconLinkBoxVariantOutline :size="20" />
+							<NcIconSvgWrapper :svg="IconLinkBoxVariantOutline" />
 						</template>
 						<!-- TRANSLATORS: This means the link can be embedded into external websites -->
 						{{ t('forms', 'Convert to embeddable link') }}
@@ -95,7 +97,7 @@
 						:disabled="locked || !isCurrentUserOwner"
 						@click="removeShare(share)">
 						<template #icon>
-							<IconDelete :size="20" />
+							<NcIconSvgWrapper :svg="IconDelete" />
 						</template>
 						{{ t('forms', 'Remove link') }}
 					</NcActionButton>
@@ -105,7 +107,7 @@
 						:disabled="locked || !isCurrentUserOwner"
 						@click="addPublicLink">
 						<template #icon>
-							<IconPlus :size="20" />
+							<NcIconSvgWrapper :svg="IconPlus" />
 						</template>
 						{{ t('forms', 'Add link') }}
 					</NcActionButton>
@@ -128,7 +130,7 @@
 		<!-- Internal link -->
 		<div class="share-div">
 			<div class="share-div__avatar">
-				<IconLinkVariant :size="20" />
+				<NcIconSvgWrapper :svg="IconLinkVariant" />
 			</div>
 			<div class="share-div__desc share-div__desc--twoline">
 				<span>{{ t('forms', 'Internal link') }}</span>
@@ -157,7 +159,7 @@
 		<div v-if="appConfig.allowPermitAll">
 			<div class="share-div">
 				<div class="share-div__avatar">
-					<IconAccountMultiple :size="20" />
+					<NcIconSvgWrapper :svg="IconAccountMultiple" />
 				</div>
 				<label for="share-switch__permit-all" class="share-div__desc">
 					{{ t('forms', 'Permit access to all logged in accounts') }}
@@ -173,7 +175,7 @@
 				v-if="appConfig.allowShowToAll && form.access.permitAllUsers"
 				class="share-div share-div--indent">
 				<div class="share-div__avatar">
-					<FormsIcon :size="16" />
+					<NcIconSvgWrapper :svg="FormsIcon" :size="16" />
 				</div>
 				<label for="share-switch__show-to-all" class="share-div__desc">
 					{{ t('forms', 'Show to all accounts on sidebar') }}
@@ -202,6 +204,14 @@
 </template>
 
 <script>
+import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
+import IconCodeBrackets from '@material-symbols/svg-400/outlined/code.svg?raw'
+import IconCopyAll from '@material-symbols/svg-400/outlined/copy_all.svg?raw'
+import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
+import IconAccountMultiple from '@material-symbols/svg-400/outlined/group.svg?raw'
+import IconLinkBoxVariantOutline from '@material-symbols/svg-400/outlined/iframe.svg?raw'
+import IconLinkVariant from '@material-symbols/svg-400/outlined/link_2.svg?raw'
+import IconQr from '@material-symbols/svg-400/outlined/qr_code.svg?raw'
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
@@ -211,19 +221,12 @@ import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
-import IconAccountMultiple from 'vue-material-design-icons/AccountMultipleOutline.vue'
-import IconCodeBrackets from 'vue-material-design-icons/CodeBrackets.vue'
-import IconLinkVariant from 'vue-material-design-icons/Link.vue'
-import IconLinkBoxVariantOutline from 'vue-material-design-icons/LinkBoxOutline.vue'
-import IconPlus from 'vue-material-design-icons/Plus.vue'
-import IconQr from 'vue-material-design-icons/Qrcode.vue'
-import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
-import FormsIcon from '../Icons/FormsIcon.vue'
-import IconCopyAll from '../Icons/IconCopyAll.vue'
 import QRDialog from '../QRDialog.vue'
 import SharingSearchDiv from './SharingSearchDiv.vue'
 import SharingShareDiv from './SharingShareDiv.vue'
+import FormsIcon from '../../../img/forms-dark.svg?raw'
 import PermissionTypes from '../../mixins/PermissionTypes.js'
 import ShareLinkMixin from '../../mixins/ShareLinkMixin.js'
 import ShareTypes from '../../mixins/ShareTypes.js'
@@ -232,15 +235,8 @@ import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
 
 export default {
 	components: {
-		FormsIcon,
-		IconAccountMultiple,
-		IconCodeBrackets,
+		NcIconSvgWrapper,
 		IconCopyAll,
-		IconDelete,
-		IconLinkBoxVariantOutline,
-		IconLinkVariant,
-		IconPlus,
-		IconQr,
 		NcActions,
 		NcActionButton,
 		NcActionLink,
@@ -277,6 +273,14 @@ export default {
 			isLoading: false,
 			appConfig: loadState(appName, 'appConfig'),
 			qrDialogText: '',
+			FormsIcon,
+			IconPlus,
+			IconCodeBrackets,
+			IconDelete,
+			IconLinkVariant,
+			IconLinkBoxVariantOutline,
+			IconAccountMultiple,
+			IconQr,
 		}
 	},
 
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index f49559031..8ea38a0c2 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -21,7 +21,7 @@
 			variant="tertiary"
 			@click="onShareForm">
 			<template #icon>
-				<IconShareVariant :size="20" />
+				<NcIconSvgWrapper :svg="IconShareVariant" />
 			</template>
 			<template v-if="!isMobile" #default>
 				{{ t('forms', 'Share') }}
@@ -31,11 +31,12 @@
 </template>
 
 <script>
+import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
 import { mdiEyeOutline, mdiPencilOutline, mdiPoll } from '@mdi/js'
 import { t } from '@nextcloud/l10n'
 import { useIsMobile } from '@nextcloud/vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import IconShareVariant from 'vue-material-design-icons/ShareVariantOutline.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import PillMenu from './PillMenu.vue'
 import PermissionTypes from '../mixins/PermissionTypes.js'
 import logger from '../utils/Logger.js'
@@ -64,7 +65,7 @@ export default {
 	name: 'TopBar',
 
 	components: {
-		IconShareVariant,
+		NcIconSvgWrapper,
 		NcButton,
 		PillMenu,
 	},
@@ -108,6 +109,12 @@ export default {
 		}
 	},
 
+	data() {
+		return {
+			IconShareVariant,
+		}
+	},
+
 	computed: {
 		currentView() {
 			return this.availableViews.filter((v) => v.id === this.$route.name)[0]
diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.js
index b3b157d47..e91c8900f 100644
--- a/src/models/AnswerTypes.js
+++ b/src/models/AnswerTypes.js
@@ -3,19 +3,19 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import IconNumeric from '@material-symbols/svg-400/outlined/123.svg?raw'
+import IconArrowDownDropCircleOutline from '@material-symbols/svg-400/outlined/arrow_drop_down_circle.svg?raw'
+import IconCalendar from '@material-symbols/svg-400/outlined/calendar_today.svg?raw'
+import IconCheckboxOutline from '@material-symbols/svg-400/outlined/check_box.svg?raw'
+import IconFile from '@material-symbols/svg-400/outlined/draft.svg?raw'
+import IconGrid from '@material-symbols/svg-400/outlined/grid_view.svg?raw'
+import IconLinearScale from '@material-symbols/svg-400/outlined/linear_scale.svg?raw'
+import IconPalette from '@material-symbols/svg-400/outlined/palette.svg?raw'
+import IconRadioboxMarked from '@material-symbols/svg-400/outlined/radio_button_checked.svg?raw'
+import IconClockOutline from '@material-symbols/svg-400/outlined/schedule.svg?raw'
+import IconTextShort from '@material-symbols/svg-400/outlined/short_text.svg?raw'
+import IconTextLong from '@material-symbols/svg-400/outlined/subject.svg?raw'
 import { markRaw } from 'vue'
-import IconArrowDownDropCircleOutline from 'vue-material-design-icons/ArrowDownDropCircleOutline.vue'
-import IconCalendar from 'vue-material-design-icons/CalendarOutline.vue'
-import IconCheckboxOutline from 'vue-material-design-icons/CheckboxOutline.vue'
-import IconClockOutline from 'vue-material-design-icons/ClockOutline.vue'
-import IconFile from 'vue-material-design-icons/FileOutline.vue'
-import IconGrid from 'vue-material-design-icons/Grid.vue'
-import IconNumeric from 'vue-material-design-icons/Numeric.vue'
-import IconRadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'
-import IconTextLong from 'vue-material-design-icons/TextLong.vue'
-import IconTextShort from 'vue-material-design-icons/TextShort.vue'
-import IconLinearScale from '../components/Icons/IconLinearScale.vue'
-import IconPalette from '../components/Icons/IconPalette.vue'
 import QuestionColor from '../components/Questions/QuestionColor.vue'
 import QuestionDate from '../components/Questions/QuestionDate.vue'
 import QuestionDropdown from '../components/Questions/QuestionDropdown.vue'
@@ -61,7 +61,7 @@ export default {
 
 	multiple: {
 		component: markRaw(QuestionMultiple),
-		icon: markRaw(IconCheckboxOutline),
+		icon: IconCheckboxOutline,
 		label: t('forms', 'Checkboxes'),
 		predefined: true,
 		validate: (question) => question.options.length > 0,
@@ -77,7 +77,7 @@ export default {
 
 	multiple_unique: {
 		component: markRaw(QuestionMultiple),
-		icon: markRaw(IconRadioboxMarked),
+		icon: IconRadioboxMarked,
 		label: t('forms', 'Radio buttons'),
 		predefined: true,
 		validate: (question) => question.options.length > 0,
@@ -96,7 +96,7 @@ export default {
 
 	dropdown: {
 		component: markRaw(QuestionDropdown),
-		icon: markRaw(IconArrowDownDropCircleOutline),
+		icon: IconArrowDownDropCircleOutline,
 		label: t('forms', 'Dropdown'),
 		predefined: true,
 		validate: (question) => question.options.length > 0,
@@ -112,7 +112,7 @@ export default {
 
 	file: {
 		component: markRaw(QuestionFile),
-		icon: markRaw(IconFile),
+		icon: IconFile,
 		label: t('forms', 'File'),
 		predefined: false,
 
@@ -122,27 +122,27 @@ export default {
 
 	grid: {
 		component: markRaw(QuestionGrid),
-		icon: markRaw(IconGrid),
+		icon: IconGrid,
 		label: t('forms', 'Grid'),
 		predefined: false,
 
 		subtypes: {
 			radio: {
-				icon: markRaw(IconRadioboxMarked),
+				icon: IconRadioboxMarked,
 				label: t('forms', 'Radio buttons'),
 				extraSettings: {
 					questionType: 'radio',
 				},
 			},
 			checkbox: {
-				icon: markRaw(IconCheckboxOutline),
+				icon: IconCheckboxOutline,
 				label: t('forms', 'Checkboxes'),
 				extraSettings: {
 					questionType: 'checkbox',
 				},
 			},
 			number: {
-				icon: markRaw(IconNumeric),
+				icon: IconNumeric,
 				label: t('forms', 'Number'),
 				extraSettings: {
 					questionType: 'number',
@@ -169,7 +169,7 @@ export default {
 
 	short: {
 		component: markRaw(QuestionShort),
-		icon: markRaw(IconTextShort),
+		icon: IconTextShort,
 		label: t('forms', 'Short answer'),
 		predefined: false,
 
@@ -181,7 +181,7 @@ export default {
 
 	long: {
 		component: markRaw(QuestionLong),
-		icon: markRaw(IconTextLong),
+		icon: IconTextLong,
 		label: t('forms', 'Long text'),
 		predefined: false,
 
@@ -193,7 +193,7 @@ export default {
 
 	date: {
 		component: markRaw(QuestionDate),
-		icon: markRaw(IconCalendar),
+		icon: IconCalendar,
 		label: t('forms', 'Date'),
 		predefined: false,
 
@@ -211,7 +211,7 @@ export default {
 
 	datetime: {
 		component: markRaw(QuestionDate),
-		icon: markRaw(IconClockOutline),
+		icon: IconClockOutline,
 		label: t('forms', 'Datetime'),
 		predefined: false,
 
@@ -227,7 +227,7 @@ export default {
 
 	time: {
 		component: markRaw(QuestionDate),
-		icon: markRaw(IconClockOutline),
+		icon: IconClockOutline,
 		label: t('forms', 'Time'),
 		predefined: false,
 
@@ -245,7 +245,7 @@ export default {
 
 	linearscale: {
 		component: markRaw(QuestionLinearScale),
-		icon: markRaw(IconLinearScale),
+		icon: IconLinearScale,
 		label: t('forms', 'Linear scale'),
 		predefined: true,
 
@@ -255,7 +255,7 @@ export default {
 
 	color: {
 		component: markRaw(QuestionColor),
-		icon: markRaw(IconPalette),
+		icon: IconPalette,
 		label: t('forms', 'Color'),
 		predefined: false,
 
diff --git a/src/models/ValidationTypes.js b/src/models/ValidationTypes.js
index cea3da828..8832389bc 100644
--- a/src/models/ValidationTypes.js
+++ b/src/models/ValidationTypes.js
@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import IconNumeric from '@material-symbols/svg-400/outlined/123.svg?raw'
+import IconPhone from '@material-symbols/svg-400/outlined/call.svg?raw'
+import IconEMail from '@material-symbols/svg-400/outlined/mail.svg?raw'
+import IconRegex from '@material-symbols/svg-400/outlined/regular_expression.svg?raw'
+import IconTextShort from '@material-symbols/svg-400/outlined/short_text.svg?raw'
 import { translate as t } from '@nextcloud/l10n'
-import IconEMail from 'vue-material-design-icons/EmailOutline.vue'
-import IconNumeric from 'vue-material-design-icons/Numeric.vue'
-import IconPhone from 'vue-material-design-icons/PhoneOutline.vue'
-import IconRegex from 'vue-material-design-icons/Regex.vue'
-import IconTextShort from 'vue-material-design-icons/TextShort.vue'
 
 /**
  * @callback ValidationFunction
diff --git a/src/views/Create.vue b/src/views/Create.vue
index c2abebcf9..b1a60b296 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -36,7 +36,7 @@
 				})
 			">
 			<template #icon>
-				<IconLock :size="64" />
+				<NcIconSvgWrapper :svg="IconLock" :size="64" />
 			</template>
 		</NcEmptyContent>
 
@@ -59,7 +59,7 @@
 				)
 			">
 			<template #icon>
-				<IconLock :size="64" />
+				<NcIconSvgWrapper :svg="IconLock" :size="64" />
 			</template>
 		</NcEmptyContent>
 
@@ -167,7 +167,7 @@
 						primary>
 						<template #icon>
 							<NcLoadingIcon v-if="isLoadingQuestions" :size="20" />
-							<IconPlus v-else :size="20" />
+							<NcIconSvgWrapper v-else :svg="IconPlus" />
 						</template>
 
 						<template v-if="!activeQuestionType">
@@ -196,7 +196,7 @@
 								class="question-menu__question"
 								@click="activeQuestionType = null">
 								<template #icon>
-									<IconChevronLeft :size="20" />
+									<NcIconSvgWrapper :svg="IconChevronLeft" />
 								</template>
 								{{ t('forms', 'Grid') }}
 							</NcActionButton>
@@ -225,6 +225,9 @@
 </template>
 
 <script>
+import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
+import IconChevronLeft from '@material-symbols/svg-400/outlined/chevron_left.svg?raw'
+import IconLock from '@material-symbols/svg-400/outlined/lock.svg?raw'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -238,11 +241,9 @@ import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
-import IconChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
-import IconLock from 'vue-material-design-icons/LockOutline.vue'
-import IconPlus from 'vue-material-design-icons/Plus.vue'
 import Question from '../components/Questions/Question.vue'
 import QuestionLong from '../components/Questions/QuestionLong.vue'
 import QuestionMultiple from '../components/Questions/QuestionMultiple.vue'
@@ -262,9 +263,7 @@ export default {
 	name: 'Create',
 	components: {
 		Draggable,
-		IconChevronLeft,
-		IconLock,
-		IconPlus,
+		NcIconSvgWrapper,
 		NcActionButton,
 		NcActionSeparator,
 		NcActions,
@@ -293,6 +292,10 @@ export default {
 			questionMenuOpened: false,
 			activeQuestionType: null,
 			questionRefs: [],
+
+			IconChevronLeft,
+			IconLock,
+			IconPlus,
 		}
 	},
 
diff --git a/src/views/Results.vue b/src/views/Results.vue
index b9258ae66..ae168d7d5 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -61,7 +61,7 @@
 							v-if="canEditForm && !form.fileId && !isFormLocked"
 							@click="onLinkFile">
 							<template #icon>
-								<IconLink :size="20" />
+								<NcIconSvgWrapper :svg="IconLink" />
 							</template>
 							{{ t('forms', 'Create spreadsheet') }}
 						</NcActionButton>
@@ -70,13 +70,13 @@
 								:href="fileUrl"
 								type="tertiary-no-background">
 								<template #icon>
-									<IconTable :size="20" />
+									<NcIconSvgWrapper :svg="IconTable" />
 								</template>
 								{{ t('forms', 'Open spreadsheet') }}
 							</NcActionButton>
 							<NcActionButton closeAfterClick @click="onReExport">
 								<template #icon>
-									<IconRefresh :size="20" />
+									<NcIconSvgWrapper :svg="IconRefresh" />
 								</template>
 								{{ t('forms', 'Re-export spreadsheet') }}
 							</NcActionButton>
@@ -85,7 +85,7 @@
 								:disabled="isFormLocked"
 								@click="onUnlinkFile">
 								<template #icon>
-									<IconLinkVariantOff :size="20" />
+									<NcIconSvgWrapper :svg="IconLinkVariantOff" />
 								</template>
 								{{ t('forms', 'Unlink spreadsheet') }}
 							</NcActionButton>
@@ -96,7 +96,7 @@
 							closeAfterClick
 							@click="onStoreToFiles">
 							<template #icon>
-								<IconFolder :size="20" />
+								<NcIconSvgWrapper :svg="IconFolder" />
 							</template>
 							{{ t('forms', 'Save copy to Files') }}
 						</NcActionButton>
@@ -106,7 +106,7 @@
 							isMenu
 							@click="isDownloadActionOpened = true">
 							<template #icon>
-								<IconDownload :size="20" />
+								<NcIconSvgWrapper :svg="IconDownload" />
 							</template>
 							{{ t('forms', 'Download') }}
 						</NcActionButton>
@@ -115,7 +115,7 @@
 							closeAfterClick
 							@click="deleteAllSubmissions">
 							<template #icon>
-								<IconDelete :size="20" />
+								<NcIconSvgWrapper :svg="IconDelete" />
 							</template>
 							{{ t('forms', 'Delete all responses') }}
 						</NcActionButton>
@@ -125,7 +125,7 @@
 						<!-- Back to top-level button -->
 						<NcActionButton @click="isDownloadActionOpened = false">
 							<template #icon>
-								<IconChevronLeft :size="20" />
+								<NcIconSvgWrapper :svg="IconChevronLeft" />
 							</template>
 							{{ t('forms', 'Download') }}
 						</NcActionButton>
@@ -134,7 +134,7 @@
 							closeAfterClick
 							@click="onDownloadFile('csv')">
 							<template #icon>
-								<IconFileDelimited :size="20" />
+								<NcIconSvgWrapper :svg="IconFileDelimited" />
 							</template>
 							CSV
 						</NcActionButton>
@@ -142,7 +142,7 @@
 							closeAfterClick
 							@click="onDownloadFile('ods')">
 							<template #icon>
-								<IconTable :size="20" />
+								<NcIconSvgWrapper :svg="IconTable" />
 							</template>
 							ODS
 						</NcActionButton>
@@ -150,7 +150,7 @@
 							closeAfterClick
 							@click="onDownloadFile('xlsx')">
 							<template #icon>
-								<IconFileExcelOutline :size="20" />
+								<NcIconSvgWrapper :svg="IconFileExcelOutline" />
 							</template>
 							XSLX
 						</NcActionButton>
@@ -172,7 +172,7 @@
 						:showTrailingButton="submissionSearch.length > 0"
 						@trailingButtonClick="submissionSearch = ''">
 						<template #icon>
-							<IconMagnify :size="20" />
+							<NcIconSvgWrapper :svg="IconMagnify" />
 						</template>
 					</NcTextField>
 				</div>
@@ -200,7 +200,7 @@
 				})
 			">
 			<template #icon>
-				<IconPoll :size="64" />
+				<NcIconSvgWrapper :svg="IconPoll" />
 			</template>
 		</NcEmptyContent>
 
@@ -211,13 +211,13 @@
 			class="forms-emptycontent"
 			:description="t('forms', 'Responses will show up here')">
 			<template #icon>
-				<IconPoll :size="64" />
+				<NcIconSvgWrapper :svg="IconPoll" />
 			</template>
 			<template #action>
 				<div class="response-actions">
 					<NcButton variant="primary" @click="onShareForm">
 						<template #icon>
-							<IconShareVariant :size="20" decorative />
+							<NcIconSvgWrapper :svg="IconShareVariant" />
 						</template>
 						{{ t('forms', 'Share form') }}
 					</NcButton>
@@ -264,6 +264,19 @@
 </template>
 
 <script>
+import IconPoll from '@material-symbols/svg-400/outlined/bar_chart.svg?raw'
+import IconChevronLeft from '@material-symbols/svg-400/outlined/chevron_left.svg?raw'
+import IconFileDelimited from '@material-symbols/svg-400/outlined/csv.svg?raw'
+import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
+import IconDownload from '@material-symbols/svg-400/outlined/download.svg?raw'
+import IconFolder from '@material-symbols/svg-400/outlined/folder.svg?raw'
+import IconLink from '@material-symbols/svg-400/outlined/link.svg?raw'
+import IconLinkVariantOff from '@material-symbols/svg-400/outlined/link_off.svg?raw'
+import IconRefresh from '@material-symbols/svg-400/outlined/refresh.svg?raw'
+import IconMagnify from '@material-symbols/svg-400/outlined/search.svg?raw'
+import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
+import IconFileExcelOutline from '@material-symbols/svg-400/outlined/table.svg?raw'
+import IconTable from '@material-symbols/svg-400/outlined/table_chart.svg?raw'
 import IconCancelSvg from '@mdi/svg/svg/cancel.svg?raw'
 import IconDeleteSvg from '@mdi/svg/svg/delete.svg?raw'
 import IconFileDelimitedSvg from '@mdi/svg/svg/file-delimited-outline.svg?raw'
@@ -287,21 +300,9 @@ import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import IconChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
-import IconFileDelimited from 'vue-material-design-icons/FileDelimitedOutline.vue'
-import IconFileExcelOutline from 'vue-material-design-icons/FileExcelOutline.vue'
-import IconFolder from 'vue-material-design-icons/FolderOutline.vue'
-import IconLink from 'vue-material-design-icons/Link.vue'
-import IconLinkVariantOff from 'vue-material-design-icons/LinkOff.vue'
-import IconMagnify from 'vue-material-design-icons/Magnify.vue'
-import IconPoll from 'vue-material-design-icons/Poll.vue'
-import IconRefresh from 'vue-material-design-icons/Refresh.vue'
-import IconShareVariant from 'vue-material-design-icons/ShareVariantOutline.vue'
-import IconTable from 'vue-material-design-icons/Table.vue'
-import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
-import IconDownload from 'vue-material-design-icons/TrayArrowDown.vue'
 import PaginationToolbar from '../components/PaginationToolbar.vue'
 import PillMenu from '../components/PillMenu.vue'
 import ResultsSummary from '../components/Results/ResultsSummary.vue'
@@ -338,27 +339,15 @@ export default {
 	name: 'Results',
 
 	components: {
-		IconChevronLeft,
-		IconDelete,
-		IconDownload,
-		IconFileDelimited,
-		IconFileExcelOutline,
-		IconFolder,
-		IconLink,
-		IconLinkVariantOff,
-		IconPoll,
-		IconRefresh,
-		IconShareVariant,
-		IconTable,
 		NcActionButton,
 		NcActionSeparator,
 		NcActions,
 		NcAppContent,
 		NcButton,
 		NcDialog,
+		NcIconSvgWrapper,
 		NcTextField,
 		PaginationToolbar,
-		IconMagnify,
 		NcEmptyContent,
 		NcLoadingIcon,
 		PillMenu,
@@ -435,6 +424,20 @@ export default {
 					},
 				},
 			],
+
+			IconChevronLeft,
+			IconDelete,
+			IconDownload,
+			IconFileDelimited,
+			IconFileExcelOutline,
+			IconFolder,
+			IconLink,
+			IconLinkVariantOff,
+			IconPoll,
+			IconRefresh,
+			IconShareVariant,
+			IconTable,
+			IconMagnify,
 		}
 	},
 
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index a97f052e4..a930ab377 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -12,7 +12,7 @@
 		@update:open="$emit('update:sidebarOpened', $event)">
 		<NcAppSidebarTab id="forms-sharing" :order="0" :name="t('forms', 'Sharing')">
 			<template #icon>
-				<IconShareVariant :size="20" />
+				<NcIconSvgWrapper :svg="IconShareVariant" />
 			</template>
 			<SharingSidebarTab
 				:form="form"
@@ -29,7 +29,7 @@
 			:order="1"
 			:name="t('forms', 'Settings')">
 			<template #icon>
-				<IconSettings :size="20" />
+				<NcIconSvgWrapper :svg="IconSettings" />
 			</template>
 			<SettingsSidebarTab
 				:form="form"
@@ -41,12 +41,13 @@
 </template>
 
 <script>
+import IconSettings from '@material-symbols/svg-400/outlined/settings.svg?raw'
+import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
 import { emit } from '@nextcloud/event-bus'
 import moment from '@nextcloud/moment'
 import NcAppSidebar from '@nextcloud/vue/components/NcAppSidebar'
 import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab'
-import IconSettings from 'vue-material-design-icons/CogOutline.vue'
-import IconShareVariant from 'vue-material-design-icons/ShareVariantOutline.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import SettingsSidebarTab from '../components/SidebarTabs/SettingsSidebarTab.vue'
 import SharingSidebarTab from '../components/SidebarTabs/SharingSidebarTab.vue'
 import ViewsMixin from '../mixins/ViewsMixin.js'
@@ -56,8 +57,7 @@ export default {
 	name: 'Sidebar',
 
 	components: {
-		IconSettings,
-		IconShareVariant,
+		NcIconSvgWrapper,
 		NcAppSidebar,
 		NcAppSidebarTab,
 		SharingSidebarTab,
@@ -75,6 +75,13 @@ export default {
 
 	emits: ['update:sidebarOpened', 'update:active'],
 
+	data() {
+		return {
+			IconSettings,
+			IconShareVariant,
+		}
+	},
+
 	computed: {
 		lockedUntilFormatted() {
 			if (this.form.lockedUntil === 0 || this.form.lockedUntil === null) {