diff --git a/src/components/MediaSettings/MediaDevicesSelector.vue b/src/components/MediaSettings/MediaDevicesSelector.vue
index 4eb696f3bae..a6375b7f233 100644
--- a/src/components/MediaSettings/MediaDevicesSelector.vue
+++ b/src/components/MediaSettings/MediaDevicesSelector.vue
@@ -23,15 +23,15 @@
 			:title="t('spreed', 'Refresh devices list')"
 			:aria-lebel="t('spreed', 'Refresh devices list')"
 			@click="$emit('refresh')">
-			<RefreshIcon :size="20" />
+			<IconRefresh :size="20" />
 		</NcButton>
 	</div>
 </template>
 
 <script>
-import Microphone from 'vue-material-design-icons/Microphone.vue'
-import RefreshIcon from 'vue-material-design-icons/Refresh.vue'
-import VideoIcon from 'vue-material-design-icons/Video.vue'
+import IconMicrophone from 'vue-material-design-icons/Microphone.vue'
+import IconRefresh from 'vue-material-design-icons/Refresh.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue'
 
 import { t } from '@nextcloud/l10n'
 
@@ -45,9 +45,9 @@ export default {
 	components: {
 		NcButton,
 		NcSelect,
-		Microphone,
-		RefreshIcon,
-		VideoIcon,
+		IconMicrophone,
+		IconRefresh,
+		IconVideo,
 	},
 
 	props: {
@@ -86,8 +86,8 @@ export default {
 
 		deviceIcon() {
 			switch (this.kind) {
-			case 'audioinput': return Microphone
-			case 'videoinput': return VideoIcon
+			case 'audioinput': return IconMicrophone
+			case 'videoinput': return IconVideo
 			default: return null
 			}
 		},
diff --git a/src/components/MediaSettings/MediaDevicesSpeakerTest.vue b/src/components/MediaSettings/MediaDevicesSpeakerTest.vue
index fe7c4aefd2b..f70c338c346 100644
--- a/src/components/MediaSettings/MediaDevicesSpeakerTest.vue
+++ b/src/components/MediaSettings/MediaDevicesSpeakerTest.vue
@@ -5,7 +5,7 @@
 
 <template>
 	<div class="media-devices-checker">
-		<VolumeHighIcon class="media-devices-checker__icon" :size="16" />
+		<IconVolumeHigh class="media-devices-checker__icon" :size="16" />
 		<NcButton type="secondary" @click="playTestSound">
 			{{ buttonLabel }}
 		</NcButton>
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import VolumeHighIcon from 'vue-material-design-icons/VolumeHigh.vue'
+import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
 
 import { t } from '@nextcloud/l10n'
 
@@ -32,8 +32,8 @@ export default {
 	name: 'MediaDevicesSpeakerTest',
 
 	components: {
+		IconVolumeHigh,
 		NcButton,
-		VolumeHighIcon,
 	},
 
 	setup() {
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 989e05b5138..241751f72e5 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -25,7 +25,7 @@
 					:aria-label="mirrorToggleLabel"
 					@click="isMirrored = !isMirrored">
 					<template #icon>
-						<ReflectHorizontal :size="20" />
+						<IconReflectHorizontal :size="20" />
 					</template>
 				</NcButton>
 				<div v-show="!showVideo"
@@ -65,10 +65,8 @@
 						:disabled="!videoPreviewAvailable"
 						@click="toggleVideo">
 						<template #icon>
-							<VideoIcon v-if="videoOn"
-								:size="20" />
-							<VideoOff v-else
-								:size="20" />
+							<IconVideo v-if="videoOn" :size="20" />
+							<IconVideoOff v-else :size="20" />
 						</template>
 					</NcButton>
 				</div>
@@ -144,7 +142,7 @@
 						@click="setSilentCall(true)">
 						{{ t('spreed', 'The conversation participants will not be notified about this call') }}
 						<template #icon>
-							<BellOff :size="16" />
+							<IconBellOff :size="16" />
 						</template>
 					</NcActionButton>
 					<NcActionButton v-else
@@ -152,7 +150,7 @@
 						close-after-click
 						@click="setSilentCall(false)">
 						<template #icon>
-							<Bell :size="16" />
+							<IconBell :size="16" />
 						</template>
 						{{ t('spreed', 'The conversation participants will be notified about this call') }}
 					</NcActionButton>
@@ -177,13 +175,13 @@
 <script>
 import { computed, markRaw, ref } from 'vue'
 
-import Bell from 'vue-material-design-icons/Bell.vue'
-import BellOff from 'vue-material-design-icons/BellOff.vue'
-import Cog from 'vue-material-design-icons/Cog.vue'
-import Creation from 'vue-material-design-icons/Creation.vue'
-import ReflectHorizontal from 'vue-material-design-icons/ReflectHorizontal.vue'
-import VideoIcon from 'vue-material-design-icons/Video.vue'
-import VideoOff from 'vue-material-design-icons/VideoOff.vue'
+import IconBell from 'vue-material-design-icons/Bell.vue'
+import IconBellOff from 'vue-material-design-icons/BellOff.vue'
+import IconCog from 'vue-material-design-icons/Cog.vue'
+import IconCreation from 'vue-material-design-icons/Creation.vue'
+import IconReflectHorizontal from 'vue-material-design-icons/ReflectHorizontal.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue'
+import IconVideoOff from 'vue-material-design-icons/VideoOff.vue'
 
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
@@ -219,24 +217,25 @@ export default {
 
 	components: {
 		AvatarWrapper,
-		Bell,
-		BellOff,
 		CallButton,
+		MediaDevicesSelector,
+		MediaDevicesSpeakerTest,
+		MediaSettingsTabs,
 		NcActionButton,
 		NcActions,
 		NcButton,
 		NcCheckboxRadioSwitch,
 		NcModal,
 		NcNoteCard,
-		MediaDevicesSelector,
-		MediaDevicesSpeakerTest,
-		MediaSettingsTabs,
-		ReflectHorizontal,
 		VideoBackground,
-		VideoIcon,
-		VideoOff,
-		VolumeIndicator,
 		VideoBackgroundEditor,
+		VolumeIndicator,
+		// Icons
+		IconBell,
+		IconBellOff,
+		IconReflectHorizontal,
+		IconVideo,
+		IconVideoOff,
 	},
 
 	props: {
@@ -275,12 +274,12 @@ export default {
 		const devicesTab = {
 			id: 'devices',
 			label: t('spreed', 'Devices'),
-			icon: markRaw(Cog),
+			icon: markRaw(IconCog),
 		}
 		const backgroundsTab = {
 			id: 'backgrounds',
 			label: t('spreed', 'Backgrounds'),
-			icon: markRaw(Creation),
+			icon: markRaw(IconCreation),
 		}
 		const tabs = computed(() => isVirtualBackgroundAvailable.value ? [devicesTab, backgroundsTab] : [devicesTab])
 
diff --git a/src/components/MediaSettings/VideoBackgroundEditor.vue b/src/components/MediaSettings/VideoBackgroundEditor.vue
index b6123e2e338..341aa3f8634 100644
--- a/src/components/MediaSettings/VideoBackgroundEditor.vue
+++ b/src/components/MediaSettings/VideoBackgroundEditor.vue
@@ -9,7 +9,7 @@
 			class="background-editor__element"
 			:class="{'background-editor__element--selected': selectedBackground === 'none'}"
 			@click="handleSelectBackground('none')">
-			<Cancel :size="20" />
+			<IconCancel :size="20" />
 			{{
 				// TRANSLATORS: "None" refers to "No background effect applied" in videos, for context, other options are "blur" or "image"
 				t('spreed', 'None')
@@ -19,20 +19,20 @@
 			class="background-editor__element"
 			:class="{'background-editor__element--selected': selectedBackground === 'blur'}"
 			@click="handleSelectBackground('blur')">
-			<Blur :size="20" />
+			<IconBlur :size="20" />
 			{{ t('spreed', 'Blur') }}
 		</button>
 		<template v-if="predefinedBackgrounds?.length">
 			<template v-if="canUploadBackgrounds">
 				<button class="background-editor__element"
 					@click="clickImportInput">
-					<Upload :size="20" />
+					<IconUpload :size="20" />
 					{{ t('spreed', 'Upload') }}
 				</button>
 				<button class="background-editor__element"
 					:class="{'background-editor__element--selected': isCustomBackground }"
 					@click="showFilePicker = true">
-					<Folder :size="20" />
+					<IconFolder :size="20" />
 					{{ t('spreed', 'Files') }}
 				</button>
 			</template>
@@ -46,7 +46,7 @@
 					'background-image': 'url(' + path + ')'
 				}"
 				@click="handleSelectBackground(path)">
-				<CheckBold v-if="selectedBackground === path"
+				<IconCheckBold v-if="selectedBackground === path"
 					:size="40"
 					fill-color="#fff" />
 			</button>
@@ -72,11 +72,11 @@
 </template>
 
 <script>
-import Blur from 'vue-material-design-icons/Blur.vue'
-import Cancel from 'vue-material-design-icons/Cancel.vue'
-import CheckBold from 'vue-material-design-icons/CheckBold.vue'
-import Folder from 'vue-material-design-icons/Folder.vue'
-import Upload from 'vue-material-design-icons/Upload.vue'
+import IconBlur from 'vue-material-design-icons/Blur.vue'
+import IconCancel from 'vue-material-design-icons/Cancel.vue'
+import IconCheckBold from 'vue-material-design-icons/CheckBold.vue'
+import IconFolder from 'vue-material-design-icons/Folder.vue'
+import IconUpload from 'vue-material-design-icons/Upload.vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { FilePickerVue } from '@nextcloud/dialogs/filepicker.js'
@@ -105,12 +105,12 @@ export default {
 	name: 'VideoBackgroundEditor',
 
 	components: {
-		Blur,
-		Cancel,
-		CheckBold,
 		FilePickerVue,
-		Folder,
-		Upload,
+		IconBlur,
+		IconCancel,
+		IconCheckBold,
+		IconFolder,
+		IconUpload,
 	},
 
 	props: {
diff --git a/src/components/TopBar/CallTime.vue b/src/components/TopBar/CallTime.vue
index a6e0d31a4cb..77cc1eb3d36 100644
--- a/src/components/TopBar/CallTime.vue
+++ b/src/components/TopBar/CallTime.vue
@@ -15,10 +15,10 @@
 				type="tertiary"
 				@click="showPopover = !showPopover">
 				<template v-if="isRecording || isStartingRecording" #icon>
-					<RecordCircle v-if="isRecording"
+					<IconRecordCircle v-if="isRecording"
 						:size="20"
 						fill-color="#e9322d" />
-					<RecordCircle v-else
+					<IconRecordCircle v-else
 						:size="20"
 						fill-color="var(--color-loading-light)" />
 				</template>
@@ -51,7 +51,7 @@
 				:wide="true"
 				@click="stopRecording">
 				<template #icon>
-					<StopIcon :size="20" />
+					<IconStop :size="20" />
 				</template>
 				{{ t('spreed', 'Stop recording') }}
 			</NcButton>
@@ -60,8 +60,8 @@
 </template>
 
 <script>
-import RecordCircle from 'vue-material-design-icons/RecordCircle.vue'
-import StopIcon from 'vue-material-design-icons/Stop.vue'
+import IconRecordCircle from 'vue-material-design-icons/RecordCircle.vue'
+import IconStop from 'vue-material-design-icons/Stop.vue'
 
 import { t } from '@nextcloud/l10n'
 
@@ -82,8 +82,8 @@ export default {
 		NcButton,
 		NcLoadingIcon,
 		NcPopover,
-		RecordCircle,
-		StopIcon,
+		IconRecordCircle,
+		IconStop,
 	},
 
 	props: {
diff --git a/src/components/TopBar/ReactionMenu.vue b/src/components/TopBar/ReactionMenu.vue
index 50f9b09a9e7..3b35835d09a 100644
--- a/src/components/TopBar/ReactionMenu.vue
+++ b/src/components/TopBar/ReactionMenu.vue
@@ -9,7 +9,7 @@
 		:aria-label="t('spreed', 'Send a reaction')"
 		class="reaction">
 		<template #icon>
-			<EmoticonOutline :size="20" />
+			<IconEmoticonOutline :size="20" />
 		</template>
 
 		<NcActionButtonGroup class="reaction__group"
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
+import IconEmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
@@ -44,7 +44,7 @@ export default {
 		NcActions,
 		NcActionButton,
 		NcActionButtonGroup,
-		EmoticonOutline,
+		IconEmoticonOutline,
 	},
 
 	props: {
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index c4379349906..7808665eca3 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -63,7 +63,7 @@
 				:title="t('spreed', 'Open Calendar')"
 				target="_blank">
 				<div class="icon">
-					<CalendarBlank :size="20" />
+					<IconCalendarBlank :size="20" />
 				</div>
 				<div class="event-info">
 					<p class="event-info__header">
@@ -84,7 +84,7 @@
 				type="tertiary"
 				@click="openSidebar('participants')">
 				<template #icon>
-					<AccountMultiple :size="20" />
+					<IconAccountMultiple :size="20" />
 				</template>
 				{{ participantsInCall }}
 			</NcButton>
@@ -120,8 +120,8 @@
 </template>
 
 <script>
-import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
-import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
+import IconAccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
 
 import { emit } from '@nextcloud/event-bus'
 import { t, n } from '@nextcloud/l10n'
@@ -165,8 +165,8 @@ export default {
 		TasksCounter,
 		ReactionMenu,
 		// Icons
-		AccountMultiple,
-		CalendarBlank,
+		IconAccountMultiple,
+		IconCalendarBlank,
 	},
 
 	mixins: [richEditor],
diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
index 75475661f99..001317ad971 100644
--- a/src/components/TopBar/TopBarMediaControls.vue
+++ b/src/components/TopBar/TopBarMediaControls.vue
@@ -18,7 +18,7 @@
 						:aria-label="qualityWarningAriaLabel"
 						@click="mouseover = !mouseover">
 						<template #icon>
-							<NetworkStrength2Alert fill-color="#e9322d" :size="20" />
+							<IconNetworkStrength2Alert fill-color="#e9322d" :size="20" />
 						</template>
 					</NcButton>
 				</template>
@@ -59,8 +59,8 @@
 			:class="blurButtonClass"
 			@click.stop="toggleVirtualBackground">
 			<template #icon>
-				<Blur v-if="isVirtualBackgroundEnabled" :size="20" />
-				<BlurOff v-else :size="20" />
+				<IconBlur v-if="isVirtualBackgroundEnabled" :size="20" />
+				<IconBlurOff v-else :size="20" />
 			</template>
 		</NcButton>
 
@@ -75,18 +75,18 @@
 			:disabled="!isScreensharingAllowed"
 			:open.sync="screenSharingMenuOpen">
 			<template #icon>
-				<MonitorOff :size="20" />
+				<IconMonitorOff :size="20" />
 			</template>
 			<!-- Actions -->
 			<NcActionButton close-after-click @click="showScreen">
 				<template #icon>
-					<Monitor :size="20" />
+					<IconMonitor :size="20" />
 				</template>
 				{{ t('spreed', 'Show your screen') }}
 			</NcActionButton>
 			<NcActionButton close-after-click @click="stopScreen">
 				<template #icon>
-					<MonitorOff :size="20" />
+					<IconMonitorOff :size="20" />
 				</template>
 				{{ t('spreed', 'Stop screensharing') }}
 			</NcActionButton>
@@ -98,7 +98,7 @@
 			:disabled="!isScreensharingAllowed"
 			@click.stop="toggleScreenSharingMenu">
 			<template #icon>
-				<MonitorShare :size="20" />
+				<IconMonitorShare :size="20" />
 			</template>
 		</NcButton>
 	</div>
@@ -107,12 +107,12 @@
 <script>
 import escapeHtml from 'escape-html'
 
-import Blur from 'vue-material-design-icons/Blur.vue'
-import BlurOff from 'vue-material-design-icons/BlurOff.vue'
-import Monitor from 'vue-material-design-icons/Monitor.vue'
-import MonitorOff from 'vue-material-design-icons/MonitorOff.vue'
-import MonitorShare from 'vue-material-design-icons/MonitorShare.vue'
-import NetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert.vue'
+import IconBlur from 'vue-material-design-icons/Blur.vue'
+import IconBlurOff from 'vue-material-design-icons/BlurOff.vue'
+import IconMonitor from 'vue-material-design-icons/Monitor.vue'
+import IconMonitorOff from 'vue-material-design-icons/MonitorOff.vue'
+import IconMonitorShare from 'vue-material-design-icons/MonitorShare.vue'
+import IconNetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert.vue'
 
 import { showMessage } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -144,12 +144,12 @@ export default {
 		NcButton,
 		NcPopover,
 		// Icons
-		Blur,
-		BlurOff,
-		Monitor,
-		MonitorOff,
-		MonitorShare,
-		NetworkStrength2Alert,
+		IconBlur,
+		IconBlurOff,
+		IconMonitor,
+		IconMonitorOff,
+		IconMonitorShare,
+		IconNetworkStrength2Alert,
 	},
 
 	props: {
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index ebbc9ea67fa..92e9a194cd0 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -13,7 +13,7 @@
 				<template #icon>
 					<!-- The following icon is much bigger than all the others
 						so we reduce its size -->
-					<HandBackLeft :size="18" />
+					<IconHandBackLeft :size="18" />
 				</template>
 			</NcButton>
 		</TransitionExpand>
@@ -24,7 +24,7 @@
 			type="tertiary">
 			<!-- Menu icon: white if in call -->
 			<template v-if="isInCall" #icon>
-				<DotsHorizontal :size="20" />
+				<IconDotsHorizontal :size="20" />
 			</template>
 
 			<template v-if="showActions && isInCall">
@@ -34,17 +34,17 @@
 					<!-- The following icon is much bigger than all the others
 					so we reduce its size -->
 					<template #icon>
-						<HandBackLeft :size="16" />
+						<IconHandBackLeft :size="16" />
 					</template>
 					{{ raiseHandButtonLabel }}
 				</NcActionButton>
 
-				<!-- Mute others -->
+				<!-- Moderator actions -->
 				<template v-if="!isOneToOneConversation && canFullModerate">
 					<NcActionButton close-after-click
 						@click="forceMuteOthers">
 						<template #icon>
-							<MicrophoneOff :size="20" />
+							<IconMicrophoneOff :size="20" />
 						</template>
 						{{ t('spreed', 'Mute others') }}
 					</NcActionButton>
@@ -54,7 +54,7 @@
 				<NcActionButton close-after-click
 					@click="showMediaSettingsDialog">
 					<template #icon>
-						<VideoIcon :size="20" />
+						<IconVideo :size="20" />
 					</template>
 					{{ t('spreed', 'Media settings') }}
 				</NcActionButton>
@@ -64,10 +64,8 @@
 					close-after-click
 					@click="changeView">
 					<template #icon>
-						<GridView v-if="!isGrid"
-							:size="20" />
-						<PromotedView v-else
-							:size="20" />
+						<IconViewGrid v-if="!isGrid" :size="20" />
+						<IconViewGallery v-else :size="20" />
 					</template>
 					{{ changeViewText }}
 				</NcActionButton>
@@ -78,8 +76,8 @@
 				close-after-click
 				@click="toggleFullscreen">
 				<template #icon>
-					<Fullscreen v-if="!isFullscreen" :size="20" />
-					<FullscreenExit v-else :size="20" />
+					<IconFullscreen v-if="!isFullscreen" :size="20" />
+					<IconFullscreenExit v-else :size="20" />
 				</template>
 				{{ labelFullscreen }}
 			</NcActionButton>
@@ -88,7 +86,7 @@
 			<NcActionLink v-if="isFileConversation"
 				:href="linkToFile">
 				<template #icon>
-					<File :size="20" />
+					<IconFile :size="20" />
 				</template>
 				{{ t('spreed', 'Go to file') }}
 			</NcActionLink>
@@ -99,7 +97,7 @@
 					close-after-click
 					@click="startRecording">
 					<template #icon>
-						<RecordCircle :size="20" />
+						<IconRecordCircle :size="20" />
 					</template>
 					{{ t('spreed', 'Start recording') }}
 				</NcActionButton>
@@ -115,7 +113,7 @@
 					close-after-click
 					@click="stopRecording">
 					<template #icon>
-						<StopIcon :size="20" />
+						<IconStop :size="20" />
 					</template>
 					{{ t('spreed', 'Stop recording') }}
 				</NcActionButton>
@@ -126,7 +124,7 @@
 				close-after-click
 				@click="$emit('open-breakout-rooms-editor')">
 				<template #icon>
-					<DotsCircle :size="20" />
+					<IconDotsCircle :size="20" />
 				</template>
 				{{ t('spreed', 'Set up breakout rooms') }}
 			</NcActionButton>
@@ -135,7 +133,7 @@
 			<NcActionButton close-after-click
 				@click="openConversationSettings">
 				<template #icon>
-					<Cog :size="20" />
+					<IconCog :size="20" />
 				</template>
 				{{ t('spreed', 'Conversation settings') }}
 			</NcActionButton>
@@ -152,20 +150,20 @@
 </template>
 
 <script>
-import Cog from 'vue-material-design-icons/Cog.vue'
-import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
-import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
+import IconCog from 'vue-material-design-icons/Cog.vue'
+import IconDotsCircle from 'vue-material-design-icons/DotsCircle.vue'
+import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import IconDownload from 'vue-material-design-icons/Download.vue'
-import File from 'vue-material-design-icons/File.vue'
-import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
-import FullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
-import RecordCircle from 'vue-material-design-icons/RecordCircle.vue'
-import StopIcon from 'vue-material-design-icons/Stop.vue'
-import VideoIcon from 'vue-material-design-icons/Video.vue'
-import PromotedView from 'vue-material-design-icons/ViewGallery.vue'
-import GridView from 'vue-material-design-icons/ViewGrid.vue'
+import IconFile from 'vue-material-design-icons/File.vue'
+import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
+import IconFullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
+import IconHandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
+import IconMicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
+import IconRecordCircle from 'vue-material-design-icons/RecordCircle.vue'
+import IconStop from 'vue-material-design-icons/Stop.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue'
+import IconViewGallery from 'vue-material-design-icons/ViewGallery.vue'
+import IconViewGrid from 'vue-material-design-icons/ViewGrid.vue'
 
 import { showWarning } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -210,20 +208,20 @@ export default {
 		NcButton,
 		NcLoadingIcon,
 		// Icons
-		Cog,
-		DotsCircle,
-		DotsHorizontal,
-		File,
-		Fullscreen,
-		FullscreenExit,
-		GridView,
-		HandBackLeft,
+		IconCog,
+		IconDotsCircle,
+		IconDotsHorizontal,
 		IconDownload,
-		MicrophoneOff,
-		PromotedView,
-		RecordCircle,
-		StopIcon,
-		VideoIcon,
+		IconFile,
+		IconFullscreen,
+		IconFullscreenExit,
+		IconHandBackLeft,
+		IconMicrophoneOff,
+		IconRecordCircle,
+		IconStop,
+		IconVideo,
+		IconViewGallery,
+		IconViewGrid,
 	},
 
 	props: {
diff --git a/src/components/UIShared/DialpadPanel.vue b/src/components/UIShared/DialpadPanel.vue
index 3f2d4a454cc..6c9bc3c676b 100644
--- a/src/components/UIShared/DialpadPanel.vue
+++ b/src/components/UIShared/DialpadPanel.vue
@@ -14,7 +14,7 @@
 				:aria-label="t('spreed', 'Open dialpad')"
 				:title="t('spreed', 'Open dialpad')">
 				<template #icon>
-					<Dialpad :size="20" />
+					<IconDialpad :size="20" />
 				</template>
 			</NcButton>
 		</template>
@@ -58,7 +58,7 @@
 				type="tertiary"
 				@click="handleBackspace">
 				<template #icon>
-					<BackspaceOutline :size="20" />
+					<IconBackspaceOutline :size="20" />
 				</template>
 			</NcButton>
 		</div>
@@ -66,8 +66,8 @@
 </template>
 
 <script>
-import BackspaceOutline from 'vue-material-design-icons/BackspaceOutline.vue'
-import Dialpad from 'vue-material-design-icons/Dialpad.vue'
+import IconBackspaceOutline from 'vue-material-design-icons/BackspaceOutline.vue'
+import IconDialpad from 'vue-material-design-icons/Dialpad.vue'
 
 import { t, getLocale } from '@nextcloud/l10n'
 
@@ -106,8 +106,8 @@ export default {
 	name: 'DialpadPanel',
 
 	components: {
-		BackspaceOutline,
-		Dialpad,
+		IconBackspaceOutline,
+		IconDialpad,
 		NcButton,
 		NcPopover,
 		NcSelect,
diff --git a/src/components/UIShared/EditableTextField.vue b/src/components/UIShared/EditableTextField.vue
index 842928c11f9..a781ceb18ff 100644
--- a/src/components/UIShared/EditableTextField.vue
+++ b/src/components/UIShared/EditableTextField.vue
@@ -28,7 +28,7 @@
 					:aria-label="t('spreed', 'Cancel editing')"
 					@click="handleCancelEditing">
 					<template #icon>
-						<Close :size="20" />
+						<IconClose :size="20" />
 					</template>
 				</NcButton>
 				<NcButton type="primary"
@@ -36,7 +36,7 @@
 					:disabled="!canSubmit"
 					@click="handleSubmitText">
 					<template #icon>
-						<Check :size="20" />
+						<IconCheck :size="20" />
 					</template>
 				</NcButton>
 				<div v-if="showCountDown"
@@ -53,7 +53,7 @@
 				:aria-label="editButtonAriaLabel"
 				@click="handleEditText">
 				<template #icon>
-					<Pencil :size="20" />
+					<IconPencil :size="20" />
 				</template>
 			</NcButton>
 		</template>
@@ -62,9 +62,9 @@
 </template>
 
 <script>
-import Check from 'vue-material-design-icons/Check.vue'
-import Close from 'vue-material-design-icons/Close.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import IconCheck from 'vue-material-design-icons/Check.vue'
+import IconClose from 'vue-material-design-icons/Close.vue'
+import IconPencil from 'vue-material-design-icons/Pencil.vue'
 
 import { t } from '@nextcloud/l10n'
 
@@ -77,12 +77,12 @@ import { parseSpecialSymbols } from '../../utils/textParse.ts'
 export default {
 	name: 'EditableTextField',
 	components: {
-		Check,
-		Close,
+		IconCheck,
+		IconClose,
+		IconPencil,
 		NcButton,
 		NcRichContenteditable,
 		NcRichText,
-		Pencil,
 	},
 
 	props: {
diff --git a/src/components/UIShared/SearchBox.vue b/src/components/UIShared/SearchBox.vue
index 2b8c0fba8ff..3efc841777f 100644
--- a/src/components/UIShared/SearchBox.vue
+++ b/src/components/UIShared/SearchBox.vue
@@ -17,12 +17,12 @@
 		@update:value="updateValue"
 		@trailing-button-click="abortSearch"
 		@keydown.esc="abortSearch">
-		<Magnify :size="16" />
+		<IconMagnify :size="16" />
 	</NcTextField>
 </template>
 
 <script>
-import Magnify from 'vue-material-design-icons/Magnify.vue'
+import IconMagnify from 'vue-material-design-icons/Magnify.vue'
 
 import { t } from '@nextcloud/l10n'
 
@@ -31,8 +31,8 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 export default {
 	name: 'SearchBox',
 	components: {
+		IconMagnify,
 		NcTextField,
-		Magnify,
 	},
 	props: {
 		/**
diff --git a/src/components/UIShared/VolumeIndicator.vue b/src/components/UIShared/VolumeIndicator.vue
index a0eb85b8bcb..59a0695ee61 100644
--- a/src/components/UIShared/VolumeIndicator.vue
+++ b/src/components/UIShared/VolumeIndicator.vue
@@ -8,30 +8,30 @@
 		:style="{ height: size + 'px', width: size + 'px' }"
 		:class="{ overload: hasOverload }">
 		<span class="volume-indicator volume-indicator-primary" :style="{ height: iconPrimaryHeight + 'px' }">
-			<Microphone v-if="audioEnabled" :size="size" :fill-color="primaryColor" />
-			<MicrophoneOff v-else :size="size" :fill-color="primaryColor" />
+			<IconMicrophone v-if="audioEnabled" :size="size" :fill-color="primaryColor" />
+			<IconMicrophoneOff v-else :size="size" :fill-color="primaryColor" />
 		</span>
 
 		<span v-if="audioPreviewAvailable"
 			class="volume-indicator volume-indicator-overlay"
 			:class="{ 'volume-indicator-overlay-mute': !audioEnabled }"
 			:style="{ height: iconOverlayHeight + 'px' }">
-			<Microphone v-if="audioEnabled" :size="size" :fill-color="overlayColor" />
-			<MicrophoneOff v-else :size="size" :fill-color="overlayMutedColor" />
+			<IconMicrophone v-if="audioEnabled" :size="size" :fill-color="overlayColor" />
+			<IconMicrophoneOff v-else :size="size" :fill-color="overlayMutedColor" />
 		</span>
 	</span>
 </template>
 
 <script>
-import Microphone from 'vue-material-design-icons/Microphone.vue'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
+import IconMicrophone from 'vue-material-design-icons/Microphone.vue'
+import IconMicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
 
 export default {
 	name: 'VolumeIndicator',
 
 	components: {
-		Microphone,
-		MicrophoneOff,
+		IconMicrophone,
+		IconMicrophoneOff,
 	},
 
 	props: {