From 9bac26ebd491b11ed6d2bb78dea3e6fbc1a0ef94 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 22 Aug 2025 17:01:28 +0200
Subject: [PATCH 1/7] fix: change icons to outline

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/PublicShareSidebarTrigger.vue             |  4 ++--
 .../BreakoutRoomsParticipantsEditor.vue       |  6 ++---
 src/components/CalendarEventsDialog.vue       | 15 ++++++------
 src/components/CallView/BottomBar.vue         |  8 +++----
 src/components/CallView/CallFailedDialog.vue  |  4 ++--
 .../CallView/shared/EmptyCallView.vue         | 12 +++++-----
 src/components/CallView/shared/LocalVideo.vue |  6 ++---
 .../CallView/shared/VideoBottomBar.spec.js    | 24 +++++++++----------
 .../CallView/shared/VideoBottomBar.vue        | 18 +++++++-------
 src/components/CallView/shared/VideoVue.vue   | 12 +++++-----
 src/components/ConversationIcon.vue           |  4 ++--
 src/components/Dashboard/EventCard.vue        | 11 +++++----
 src/components/Dashboard/TalkDashboard.vue    | 16 ++++++-------
 src/components/ExtendOneToOneDialog.vue       |  4 ++--
 .../ConversationsList/Conversation.vue        |  4 ++--
 src/components/LobbyScreen.vue                |  6 ++---
 .../MediaSettings/VideoBackgroundEditor.vue   |  2 +-
 .../Message/MessagePart/Poll.vue              | 12 +++++-----
 .../NewConversationDialog.vue                 |  6 ++---
 src/components/NewMessage/NewMessage.vue      |  2 +-
 src/components/PollViewer/PollEditor.vue      |  6 ++---
 src/components/PollViewer/PollViewer.vue      | 14 +++++------
 .../Participants/Participant.spec.js          | 20 ++++++++--------
 src/components/SelectPhoneNumber.vue          |  6 ++---
 src/components/TopBar/CallButton.vue          |  2 +-
 src/components/TopBar/CallTime.vue            | 11 ++++-----
 src/components/TopBar/TopBarMenu.vue          |  6 ++---
 .../UIShared/ConversationActionsShortcut.vue  |  4 ++--
 src/components/UIShared/EditableTextField.vue |  6 ++---
 src/views/ForbiddenView.vue                   |  4 ++--
 30 files changed, 126 insertions(+), 129 deletions(-)

diff --git a/src/PublicShareSidebarTrigger.vue b/src/PublicShareSidebarTrigger.vue
index 92df9b48f11..8c7550b012b 100644
--- a/src/PublicShareSidebarTrigger.vue
+++ b/src/PublicShareSidebarTrigger.vue
@@ -9,7 +9,7 @@
 		:aria-label="ariaLabel"
 		@click="emit('click')">
 		<template #icon>
-			<MessageText :size="20" />
+			<IconMessageTextOutline :size="20" />
 		</template>
 	</NcHeaderButton>
 </template>
@@ -20,7 +20,7 @@ import type { UnwrapNestedRefs } from 'vue'
 import { t } from '@nextcloud/l10n'
 import { computed } from 'vue'
 import NcHeaderButton from '@nextcloud/vue/components/NcHeaderButton'
-import MessageText from 'vue-material-design-icons/MessageText.vue'
+import IconMessageTextOutline from 'vue-material-design-icons/MessageTextOutline.vue'
 
 const props = defineProps<{
 	sidebarState: UnwrapNestedRefs<{ isOpen: boolean }>
diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
index 230e4222373..fcc01cd4eb2 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
@@ -34,7 +34,7 @@
 				variant="error"
 				@click="toggleShowDialog">
 				<template #icon>
-					<Delete :size="20" />
+					<IconDeleteOutline :size="20" />
 				</template>
 				{{ deleteButtonLabel }}
 			</NcButton>
@@ -97,7 +97,7 @@ import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
 import Reload from 'vue-material-design-icons/Reload.vue'
 import BreakoutRoomItem from '../RightSidebar/BreakoutRooms/BreakoutRoomItem.vue'
@@ -117,7 +117,7 @@ export default {
 		SelectableParticipant,
 		NcButton,
 		IconArrowLeft,
-		Delete,
+		IconDeleteOutline,
 		NcDialog,
 	},
 
diff --git a/src/components/CalendarEventsDialog.vue b/src/components/CalendarEventsDialog.vue
index fe9b8e8ce04..5e065534bc1 100644
--- a/src/components/CalendarEventsDialog.vue
+++ b/src/components/CalendarEventsDialog.vue
@@ -23,12 +23,11 @@ import NcPopover from '@nextcloud/vue/components/NcPopover'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import IconAccountPlus from 'vue-material-design-icons/AccountPlus.vue'
-import IconAccountSearch from 'vue-material-design-icons/AccountSearch.vue'
-import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
+import IconAccountPlusOutline from 'vue-material-design-icons/AccountPlusOutline.vue'
+import IconAccountSearchOutline from 'vue-material-design-icons/AccountSearchOutline.vue'
+import IconCalendarBlankOutline from 'vue-material-design-icons/CalendarBlankOutline.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
-import IconReload from 'vue-material-design-icons/Reload.vue'
 import SelectableParticipant from './BreakoutRoomsEditor/SelectableParticipant.vue'
 import CalendarEventSmall from './UIShared/CalendarEventSmall.vue'
 import ContactSelectionBubble from './UIShared/ContactSelectionBubble.vue'
@@ -321,7 +320,7 @@ async function submitNewMeeting() {
 					:title="t('spreed', 'Upcoming meetings')"
 					:aria-label="t('spreed', 'Upcoming meetings')">
 					<template #icon>
-						<IconCalendarBlank :size="20" />
+						<IconCalendarBlankOutline :size="20" />
 					</template>
 					<template v-if="upcomingEvents[0] && !isMobile" #default>
 						<span class="upcoming-meeting__header">
@@ -346,7 +345,7 @@ async function submitNewMeeting() {
 				<NcEmptyContent v-else class="calendar-events__empty-content">
 					<template #icon>
 						<NcLoadingIcon v-if="loading" />
-						<IconCalendarBlank v-else />
+						<IconCalendarBlankOutline v-else />
 					</template>
 
 					<template #description>
@@ -425,7 +424,7 @@ async function submitNewMeeting() {
 					</NcCheckboxRadioSwitch>
 					<NcButton v-if="!isOneToOneConversation && !selectAll" variant="tertiary" @click="isSelectorOpen = true">
 						<template #icon>
-							<IconAccountPlus :size="20" />
+							<IconAccountPlusOutline :size="20" />
 						</template>
 						{{ t('spreed', 'Add attendees') }}
 					</NcButton>
@@ -483,7 +482,7 @@ async function submitNewMeeting() {
 					:name="!participantsInitialised ? t('spreed', 'Loading …') : t('spreed', 'No results')">
 					<template #icon>
 						<NcLoadingIcon v-if="!participantsInitialised" />
-						<IconAccountSearch v-else />
+						<IconAccountSearchOutline v-else />
 					</template>
 				</NcEmptyContent>
 				<template #actions>
diff --git a/src/components/CallView/BottomBar.vue b/src/components/CallView/BottomBar.vue
index e9c5352006b..bfed5a6d96b 100644
--- a/src/components/CallView/BottomBar.vue
+++ b/src/components/CallView/BottomBar.vue
@@ -12,8 +12,8 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
 import IconFullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
 import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
-import IconViewGallery from 'vue-material-design-icons/ViewGallery.vue'
-import IconViewGrid from 'vue-material-design-icons/ViewGrid.vue'
+import IconViewGalleryOutline from 'vue-material-design-icons/ViewGalleryOutline.vue'
+import IconViewGridOutline from 'vue-material-design-icons/ViewGridOutline.vue'
 import CallButton from '../TopBar/CallButton.vue'
 import ReactionMenu from '../TopBar/ReactionMenu.vue'
 import TopBarMediaControls from '../TopBar/TopBarMediaControls.vue'
@@ -176,8 +176,8 @@ useHotKey('r', toggleHandRaised)
 				:title="changeViewLabel"
 				@click="changeView">
 				<template #icon>
-					<IconViewGrid v-if="!isGrid" :size="20" />
-					<IconViewGallery v-else :size="20" />
+					<IconViewGridOutline v-if="!isGrid" :size="20" />
+					<IconViewGalleryOutline v-else :size="20" />
 				</template>
 			</NcButton>
 		</div>
diff --git a/src/components/CallView/CallFailedDialog.vue b/src/components/CallView/CallFailedDialog.vue
index 783bfeabfa7..e64f6038f04 100644
--- a/src/components/CallView/CallFailedDialog.vue
+++ b/src/components/CallView/CallFailedDialog.vue
@@ -9,7 +9,7 @@ import { computed } from 'vue'
 import { useStore } from 'vuex'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcModal from '@nextcloud/vue/components/NcModal'
-import IconAlertOctagon from 'vue-material-design-icons/AlertOctagon.vue'
+import IconAlertOctagonOutline from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import { messagePleaseTryToReload } from '../../utils/talkDesktopUtils.ts'
 
 const props = defineProps({
@@ -60,7 +60,7 @@ function clearConnectionFailedError() {
 		<NcEmptyContent :name="t('spreed', 'Connection failed')"
 			:description="message">
 			<template #icon>
-				<IconAlertOctagon />
+				<IconAlertOctagonOutline />
 			</template>
 		</NcEmptyContent>
 	</NcModal>
diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue
index 4358dfb4402..00a640ff7f3 100644
--- a/src/components/CallView/shared/EmptyCallView.vue
+++ b/src/components/CallView/shared/EmptyCallView.vue
@@ -29,9 +29,9 @@
 import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import IconAccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+import IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'
 import IconLink from 'vue-material-design-icons/Link.vue'
-import IconPhone from 'vue-material-design-icons/Phone.vue'
+import IconPhoneOutline from 'vue-material-design-icons/PhoneOutline.vue'
 import { useGetToken } from '../../../composables/useGetToken.ts'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.ts'
 import { copyConversationLinkToClipboard } from '../../../utils/handleUrl.ts'
@@ -43,9 +43,9 @@ export default {
 	components: {
 		NcButton,
 		NcLoadingIcon,
-		IconAccountMultiple,
+		IconAccountMultipleOutline,
 		IconLink,
-		IconPhone,
+		IconPhoneOutline,
 	},
 
 	props: {
@@ -127,9 +127,9 @@ export default {
 			if (this.isConnecting) {
 				return NcLoadingIcon
 			} else if (this.isPhoneConversation) {
-				return IconPhone
+				return IconPhoneOutline
 			} else {
-				return this.isPublicConversation ? IconLink : IconAccountMultiple
+				return this.isPublicConversation ? IconLink : IconAccountMultipleOutline
 			}
 		},
 
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index 20cf7b6b77a..99d3e2ccdb1 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -24,7 +24,7 @@
 				:class="fitVideo ? 'video--fit' : 'video--fill'"
 				class="video"
 				@playing="updateVideoAspectRatio" />
-			<AccountOff v-if="isPresenterOverlay && mouseover"
+			<IconAccountOffOutline v-if="isPresenterOverlay && mouseover"
 				class="presenter-icon__hide"
 				:aria-label="t('spreed', 'Hide presenter video')"
 				:title="t('spreed', 'Hide presenter video')"
@@ -65,7 +65,7 @@ import { t } from '@nextcloud/l10n'
 import { inject, ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import AccountOff from 'vue-material-design-icons/AccountOff.vue'
+import IconAccountOffOutline from 'vue-material-design-icons/AccountOffOutline.vue'
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import VideoBackground from './VideoBackground.vue'
 import { AVATAR } from '../../../constants.ts'
@@ -81,7 +81,7 @@ export default {
 
 	components: {
 		AvatarWrapper,
-		AccountOff,
+		IconAccountOffOutline,
 		NcButton,
 		VideoBackground,
 		NcLoadingIcon,
diff --git a/src/components/CallView/shared/VideoBottomBar.spec.js b/src/components/CallView/shared/VideoBottomBar.spec.js
index b01a6cc783e..9d7e99b7889 100644
--- a/src/components/CallView/shared/VideoBottomBar.spec.js
+++ b/src/components/CallView/shared/VideoBottomBar.spec.js
@@ -9,10 +9,10 @@ import { cloneDeep } from 'lodash'
 import { createPinia, setActivePinia } from 'pinia'
 import { createStore } from 'vuex'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
-import VideoIcon from 'vue-material-design-icons/Video.vue'
-import VideoOff from 'vue-material-design-icons/VideoOff.vue'
+import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
+import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
+import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import VideoBottomBar from './VideoBottomBar.vue'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.ts'
 import storeConfig from '../../../store/storeConfig.js'
@@ -214,10 +214,10 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const iceFailedIndicator = wrapper.findComponent(AlertCircle)
+					const iceFailedIndicator = wrapper.findComponent(IconAlertCircleOutline)
 					expect(iceFailedIndicator.exists()).toBeFalsy()
 
-					const raiseHandIndicator = wrapper.findComponent(HandBackLeft)
+					const raiseHandIndicator = wrapper.findComponent(IconHandBackLeftOutline)
 					expect(raiseHandIndicator.exists()).toBeTruthy()
 
 					const indicators = wrapper.findAllComponents(NcButton)
@@ -236,10 +236,10 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const iceFailedIndicator = wrapper.findComponent(AlertCircle)
+					const iceFailedIndicator = wrapper.findComponent(IconAlertCircleOutline)
 					expect(iceFailedIndicator.exists()).toBeTruthy()
 
-					const raiseHandIndicator = wrapper.findComponent(HandBackLeft)
+					const raiseHandIndicator = wrapper.findComponent(IconHandBackLeftOutline)
 					expect(raiseHandIndicator.exists()).toBeFalsy()
 
 					const indicators = wrapper.findAllComponents(NcButton)
@@ -258,7 +258,7 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const raiseHandIndicator = wrapper.findComponent(HandBackLeft)
+					const raiseHandIndicator = wrapper.findComponent(IconHandBackLeftOutline)
 					expect(raiseHandIndicator.exists()).toBeFalsy()
 				})
 
@@ -271,7 +271,7 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const raiseHandIndicator = wrapper.findComponent(HandBackLeft)
+					const raiseHandIndicator = wrapper.findComponent(IconHandBackLeftOutline)
 					expect(raiseHandIndicator.exists()).toBeTruthy()
 				})
 			})
@@ -420,7 +420,7 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const videoOnIcon = wrapper.findComponent(VideoIcon)
+					const videoOnIcon = wrapper.findComponent(IconVideoOutline)
 					expect(videoOnIcon.exists()).toBeTruthy()
 				})
 
@@ -437,7 +437,7 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const videoOffIcon = wrapper.findComponent(VideoOff)
+					const videoOffIcon = wrapper.findComponent(IconVideoOffOutline)
 					expect(videoOffIcon.exists()).toBeTruthy()
 				})
 
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index 1489bb99970..d4f29dc61c0 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -10,7 +10,7 @@
 		@mouseleave.stop="mouseover = false">
 		<TransitionWrapper name="fade">
 			<div v-if="showRaiseHandIndicator" class="status-indicator raiseHandIndicator">
-				<HandBackLeft :size="18" fill-color="#ffffff" />
+				<IconHandBackLeftOutline :size="18" fill-color="#ffffff" />
 			</div>
 		</TransitionWrapper>
 
@@ -64,13 +64,13 @@
 					variant="tertiary-no-background"
 					@click.stop="switchToScreen">
 					<template #icon>
-						<Monitor :size="20" fill-color="#ffffff" />
+						<IconMonitor :size="20" fill-color="#ffffff" />
 					</template>
 				</NcButton>
 
 				<div v-if="connectionStateFailedNoRestart"
 					class="status-indicator iceFailedIndicator">
-					<AlertCircle :size="20" fill-color="#ffffff" />
+					<IconAlertCircleOutline :size="20" fill-color="#ffffff" />
 				</div>
 			</TransitionWrapper>
 
@@ -88,11 +88,11 @@
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
+import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
 import Microphone from 'vue-material-design-icons/Microphone.vue'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
-import Monitor from 'vue-material-design-icons/Monitor.vue'
+import IconMonitor from 'vue-material-design-icons/Monitor.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 import VideoOff from 'vue-material-design-icons/VideoOff.vue'
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
@@ -105,11 +105,11 @@ export default {
 	name: 'VideoBottomBar',
 
 	components: {
-		AlertCircle,
-		HandBackLeft,
+		IconAlertCircleOutline,
+		IconHandBackLeftOutline,
 		Microphone,
 		MicrophoneOff,
-		Monitor,
+		IconMonitor,
 		NcButton,
 		TransitionWrapper,
 		VideoIcon,
diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
index 2ed7f6a2d08..bdcb90900c8 100644
--- a/src/components/CallView/shared/VideoVue.vue
+++ b/src/components/CallView/shared/VideoVue.vue
@@ -22,7 +22,7 @@
 					:class="fitVideo ? 'video--fit' : 'video--fill'"
 					class="video"
 					@playing="updateVideoAspectRatio" />
-				<AccountOff v-if="isPresenterOverlay && mouseover"
+				<IconAccountOffOutline v-if="isPresenterOverlay && mouseover"
 					class="presenter-icon__hide"
 					:aria-label="t('spreed', 'Hide presenter video')"
 					:title="t('spreed', 'Hide presenter video')"
@@ -62,7 +62,7 @@
 		<TransitionWrapper name="fade">
 			<div v-if="showPlaceholderForPromoted"
 				class="placeholder-for-promoted">
-				<AccountCircle v-if="isPromoted || isSelected" fill-color="#FFFFFF" :size="64" />
+				<IconAccountCircleOutline v-if="isPromoted || isSelected" fill-color="#FFFFFF" :size="64" />
 			</div>
 		</TransitionWrapper>
 		<div v-if="connectionMessage"
@@ -85,8 +85,8 @@ import Hex from 'crypto-js/enc-hex.js'
 import SHA1 from 'crypto-js/sha1.js'
 import { inject, ref } from 'vue'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import AccountCircle from 'vue-material-design-icons/AccountCircle.vue'
-import AccountOff from 'vue-material-design-icons/AccountOff.vue'
+import IconAccountCircleOutline from 'vue-material-design-icons/AccountCircleOutline.vue'
+import IconAccountOffOutline from 'vue-material-design-icons/AccountOffOutline.vue'
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 import Screen from './Screen.vue'
@@ -113,8 +113,8 @@ export default {
 		VideoBottomBar,
 		NcLoadingIcon,
 		// icons
-		AccountCircle,
-		AccountOff,
+		IconAccountCircleOutline,
+		IconAccountOffOutline,
 	},
 
 	props: {
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 09b6c70a826..ef2dd222c1c 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -58,8 +58,8 @@ import { useIsDarkTheme } from '@nextcloud/vue/composables/useIsDarkTheme'
 import { ref } from 'vue'
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import IconLink from 'vue-material-design-icons/Link.vue'
-import IconStar from 'vue-material-design-icons/Star.vue'
-import IconVideo from 'vue-material-design-icons/Video.vue'
+import IconStar from 'vue-material-design-icons/Star.vue' // Filled for better indication
+import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
 import IconWeb from 'vue-material-design-icons/Web.vue'
 import { AVATAR, CONVERSATION } from '../constants.ts'
 import { getConversationAvatarOcsUrl } from '../services/avatarService.ts'
diff --git a/src/components/Dashboard/EventCard.vue b/src/components/Dashboard/EventCard.vue
index d41c2cf111d..87862b65cbf 100644
--- a/src/components/Dashboard/EventCard.vue
+++ b/src/components/Dashboard/EventCard.vue
@@ -17,8 +17,9 @@ import { useStore } from 'vuex'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcChip from '@nextcloud/vue/components/NcChip'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
-import IconVideo from 'vue-material-design-icons/Video.vue'
+import IconCalendarBlankOutline from 'vue-material-design-icons/CalendarBlankOutline.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
+import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import ConversationIcon from '../ConversationIcon.vue'
 import IconTalk from '../../../img/app-dark.svg?raw'
 import { useIsInCall } from '../../composables/useIsInCall.js'
@@ -172,7 +173,7 @@ function handleJoin({ call }: { call: boolean }) {
 		<p class="event-card__date secondary_text">
 			<span>{{ eventDateLabel }}</span>
 			<template v-if="hasCall">
-				<IconVideo :size="20" fill-color="#E9322D" />
+				<IconVideo :size="20" fill-color="var(--color-border-error)" />
 				<span>{{ elapsedTime }}</span>
 			</template>
 		</p>
@@ -211,7 +212,7 @@ function handleJoin({ call }: { call: boolean }) {
 				variant="primary"
 				@click="handleJoin({ call: true })">
 				<template #icon>
-					<IconVideo :size="20" />
+					<IconVideoOutline :size="20" />
 				</template>
 				{{ t('spreed', 'Join') }}
 			</NcButton>
@@ -230,7 +231,7 @@ function handleJoin({ call }: { call: boolean }) {
 				:title="t('spreed', 'View event on Calendar')"
 				:aria-label="t('spreed', 'View event on Calendar')">
 				<template #icon>
-					<IconCalendarBlank :size="20" />
+					<IconCalendarBlankOutline :size="20" />
 				</template>
 			</NcButton>
 		</span>
diff --git a/src/components/Dashboard/TalkDashboard.vue b/src/components/Dashboard/TalkDashboard.vue
index 61f769cebc6..40c48c02f2e 100644
--- a/src/components/Dashboard/TalkDashboard.vue
+++ b/src/components/Dashboard/TalkDashboard.vue
@@ -18,12 +18,12 @@ import IconAlarm from 'vue-material-design-icons/Alarm.vue'
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import IconAt from 'vue-material-design-icons/At.vue'
-import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
+import IconCalendarBlankOutline from 'vue-material-design-icons/CalendarBlankOutline.vue'
 import IconList from 'vue-material-design-icons/FormatListBulleted.vue'
-import IconMicrophone from 'vue-material-design-icons/Microphone.vue'
-import IconPhone from 'vue-material-design-icons/Phone.vue'
+import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
+import IconPhoneOutline from 'vue-material-design-icons/PhoneOutline.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
-import IconVideo from 'vue-material-design-icons/Video.vue'
+import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import ConversationsListVirtual from '../LeftSidebar/ConversationsList/ConversationsListVirtual.vue'
 import SearchMessageItem from '../RightSidebar/SearchMessages/SearchMessageItem.vue'
 import LoadingPlaceholder from '../UIShared/LoadingPlaceholder.vue'
@@ -187,7 +187,7 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' })
 				<template #trigger>
 					<NcButton variant="primary">
 						<template #icon>
-							<IconVideo />
+							<IconVideoOutline />
 						</template>
 						{{ t('spreed', 'Start meeting now') }}
 					</NcButton>
@@ -224,14 +224,14 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' })
 			<NcButton v-if="canModerateSipDialOut"
 				@click="EventBus.emit('call-phone-dialog:show')">
 				<template #icon>
-					<IconPhone :size="20" />
+					<IconPhoneOutline :size="20" />
 				</template>
 				{{ t('spreed', 'Call a phone number') }}
 			</NcButton>
 			<NcButton variant="tertiary"
 				@click="emit('talk:media-settings:show', 'device-check')">
 				<template #icon>
-					<IconMicrophone :size="20" />
+					<IconMicrophoneOutline :size="20" />
 				</template>
 				{{ t('spreed', 'Check devices') }}
 			</NcButton>
@@ -285,7 +285,7 @@ function scrollEventCards({ direction }: { direction: 'backward' | 'forward' })
 				:href="generateUrl('apps/calendar')"
 				target="_blank">
 				<template #icon>
-					<IconCalendarBlank :size="20" />
+					<IconCalendarBlankOutline :size="20" />
 				</template>
 				{{ t('spreed', 'Open calendar') }}
 			</NcButton>
diff --git a/src/components/ExtendOneToOneDialog.vue b/src/components/ExtendOneToOneDialog.vue
index 912d0f7eba0..c440a146372 100644
--- a/src/components/ExtendOneToOneDialog.vue
+++ b/src/components/ExtendOneToOneDialog.vue
@@ -13,7 +13,7 @@ import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcPopover from '@nextcloud/vue/components/NcPopover'
-import IconAccountMultiplePlus from 'vue-material-design-icons/AccountMultiplePlus.vue'
+import IconAccountMultiplePlusOutline from 'vue-material-design-icons/AccountMultiplePlusOutline.vue'
 import NewConversationContactsPage from './NewConversationDialog/NewConversationContactsPage.vue'
 import { ATTENDEE, CONVERSATION } from '../constants.ts'
 
@@ -78,7 +78,7 @@ async function extendOneToOneConversation() {
 				:title="t('spreed', 'Start a group conversation')"
 				:aria-label="t('spreed', 'Start a group conversation')">
 				<template #icon>
-					<IconAccountMultiplePlus :size="20" />
+					<IconAccountMultiplePlusOutline :size="20" />
 				</template>
 			</NcButton>
 		</template>
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index 5d4d02f4a25..f1d95943da8 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -283,8 +283,8 @@ import IconEyeOutline from 'vue-material-design-icons/EyeOutline.vue'
 import IconMessageAlertOutline from 'vue-material-design-icons/MessageAlertOutline.vue'
 import IconPhoneRingOutline from 'vue-material-design-icons/PhoneRingOutline.vue'
 import IconShieldLockOutline from 'vue-material-design-icons/ShieldLockOutline.vue'
-import IconStar from 'vue-material-design-icons/Star.vue'
-import IconVideo from 'vue-material-design-icons/Video.vue'
+import IconStar from 'vue-material-design-icons/Star.vue' // Filled for better indication
+import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
 import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
 import IconVolumeOff from 'vue-material-design-icons/VolumeOff.vue'
 import ConversationIcon from './../../ConversationIcon.vue'
diff --git a/src/components/LobbyScreen.vue b/src/components/LobbyScreen.vue
index 4d95f9abdba..a37e9dc3331 100644
--- a/src/components/LobbyScreen.vue
+++ b/src/components/LobbyScreen.vue
@@ -6,7 +6,7 @@
 <template>
 	<div class="lobby">
 		<div class="lobby__header">
-			<RoomService :size="64" />
+			<IconRoomServiceOutline :size="64" />
 			<h2>{{ currentConversationName }}</h2>
 
 			<p class="lobby__timer">
@@ -38,7 +38,7 @@
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import NcRichText from '@nextcloud/vue/components/NcRichText'
-import RoomService from 'vue-material-design-icons/RoomService.vue'
+import IconRoomServiceOutline from 'vue-material-design-icons/RoomServiceOutline.vue'
 import MediaSettings from '../components/MediaSettings/MediaSettings.vue'
 import { useGetToken } from '../composables/useGetToken.ts'
 import { futureRelativeTime, ONE_DAY_IN_MS } from '../utils/formattedTime.ts'
@@ -49,7 +49,7 @@ export default {
 
 	components: {
 		NcRichText,
-		RoomService,
+		IconRoomServiceOutline,
 		MediaSettings,
 	},
 
diff --git a/src/components/MediaSettings/VideoBackgroundEditor.vue b/src/components/MediaSettings/VideoBackgroundEditor.vue
index 485cc5b0d3c..9515476e996 100644
--- a/src/components/MediaSettings/VideoBackgroundEditor.vue
+++ b/src/components/MediaSettings/VideoBackgroundEditor.vue
@@ -71,7 +71,7 @@ import { generateUrl, imagePath } from '@nextcloud/router'
 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 IconFolder from 'vue-material-design-icons/Folder.vue' // Filled as in Files app icon
 import IconUpload from 'vue-material-design-icons/Upload.vue'
 import { VIRTUAL_BACKGROUND } from '../../constants.ts'
 import BrowserStorage from '../../services/BrowserStorage.js'
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
index a001d292ef7..b48a9059da0 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
@@ -14,7 +14,7 @@
 				:aria-label="t('spreed', 'Edit poll draft')"
 				@click.stop="editDraft">
 				<template #icon>
-					<IconPencil :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 			</NcButton>
 			<NcButton variant="tertiary"
@@ -22,7 +22,7 @@
 				:aria-label="t('spreed', 'Delete poll draft')"
 				@click.stop="deleteDraft">
 				<template #icon>
-					<IconDelete :size="20" />
+					<IconDeleteOutline :size="20" />
 				</template>
 			</NcButton>
 		</span>
@@ -58,8 +58,8 @@
 import { n, t } from '@nextcloud/l10n'
 import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import IconDelete from 'vue-material-design-icons/Delete.vue'
-import IconPencil from 'vue-material-design-icons/Pencil.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import IconPoll from 'vue-material-design-icons/Poll.vue'
 import { POLL } from '../../../../../constants.ts'
 import { hasTalkFeature } from '../../../../../services/CapabilitiesManager.ts'
@@ -70,8 +70,8 @@ export default {
 
 	components: {
 		NcButton,
-		IconDelete,
-		IconPencil,
+		IconDeleteOutline,
+		IconPencilOutline,
 		IconPoll,
 	},
 
diff --git a/src/components/NewConversationDialog/NewConversationDialog.vue b/src/components/NewConversationDialog/NewConversationDialog.vue
index 659f7dcaecc..7b3f5749297 100644
--- a/src/components/NewConversationDialog/NewConversationDialog.vue
+++ b/src/components/NewConversationDialog/NewConversationDialog.vue
@@ -73,7 +73,7 @@
 			<NcEmptyContent>
 				<template #icon>
 					<LoadingComponent v-if="isLoading" />
-					<AlertCircle v-else-if="error" :size="64" />
+					<IconAlertCircleOutline v-else-if="error" :size="64" />
 					<Check v-else-if="success && isPublic" :size="64" />
 				</template>
 
@@ -110,7 +110,7 @@ import { provide, ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcModal from '@nextcloud/vue/components/NcModal'
-import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
+import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import LoadingComponent from '../LoadingComponent.vue'
 import NewConversationContactsPage from './NewConversationContactsPage.vue'
@@ -141,7 +141,7 @@ export default {
 		NcModal,
 		NewConversationContactsPage,
 		Check,
-		AlertCircle,
+		IconAlertCircleOutline,
 	},
 
 	props: {
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index 67c42f1c124..93784302561 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/src/components/NewMessage/NewMessage.vue
@@ -194,7 +194,7 @@ import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
 import IconEmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 import IconForumOutline from 'vue-material-design-icons/ForumOutline.vue'
-import IconSend from 'vue-material-design-icons/Send.vue'
+import IconSend from 'vue-material-design-icons/Send.vue' // Filled for better indication
 import Quote from '../Quote.vue'
 import NewMessageAbsenceInfo from './NewMessageAbsenceInfo.vue'
 import NewMessageAttachments from './NewMessageAttachments.vue'
diff --git a/src/components/PollViewer/PollEditor.vue b/src/components/PollViewer/PollEditor.vue
index d646409c4ab..5fe14e2eed6 100644
--- a/src/components/PollViewer/PollEditor.vue
+++ b/src/components/PollViewer/PollEditor.vue
@@ -33,7 +33,7 @@
 			<NcActions v-if="supportPollDrafts" force-menu>
 				<NcActionButton v-if="props.canCreatePollDrafts && !isOpenedFromDraft" close-after-click @click="openPollDraftHandler">
 					<template #icon>
-						<IconFileEdit :size="20" />
+						<IconFileEditOutline :size="20" />
 					</template>
 					{{ t('spreed', 'Browse poll drafts') }}
 				</NcActionButton>
@@ -90,7 +90,7 @@
 			<NcActions v-if="supportPollDrafts" force-menu>
 				<NcActionButton v-if="props.canCreatePollDrafts && !editingDraftId" :disabled="!isFilled" @click="createPollDraft">
 					<template #icon>
-						<IconFileEdit :size="20" />
+						<IconFileEditOutline :size="20" />
 					</template>
 					{{ t('spreed', 'Save as draft') }}
 				</NcActionButton>
@@ -125,7 +125,7 @@ import NcTextField from '@nextcloud/vue/components/NcTextField'
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import IconFileDownload from 'vue-material-design-icons/FileDownload.vue'
-import IconFileEdit from 'vue-material-design-icons/FileEdit.vue'
+import IconFileEditOutline from 'vue-material-design-icons/FileEditOutline.vue'
 import IconFileUpload from 'vue-material-design-icons/FileUpload.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import { useGetToken } from '../../composables/useGetToken.ts'
diff --git a/src/components/PollViewer/PollViewer.vue b/src/components/PollViewer/PollViewer.vue
index fdbbbc74f91..fb66fb7318b 100644
--- a/src/components/PollViewer/PollViewer.vue
+++ b/src/components/PollViewer/PollViewer.vue
@@ -76,7 +76,7 @@
 				<NcActions v-if="canEndPoll" force-menu>
 					<NcActionButton v-if="supportPollDrafts && isModerator" @click="createPollDraft">
 						<template #icon>
-							<IconFileEdit :size="20" />
+							<IconFileEditOutline :size="20" />
 						</template>
 						{{ t('spreed', 'Save as draft') }}
 					</NcActionButton>
@@ -89,7 +89,7 @@
 					<NcActionButton class="critical" @click="endPoll">
 						{{ t('spreed', 'End poll') }}
 						<template #icon>
-							<IconFileLock :size="20" />
+							<IconFileLockOutline :size="20" />
 						</template>
 					</NcActionButton>
 				</NcActions>
@@ -98,7 +98,7 @@
 				<NcActions force-menu>
 					<NcActionButton v-if="isModerator" @click="createPollDraft">
 						<template #icon>
-							<IconFileEdit :size="20" />
+							<IconFileEditOutline :size="20" />
 						</template>
 						{{ t('spreed', 'Save as draft') }}
 					</NcActionButton>
@@ -128,8 +128,8 @@ import NcModal from '@nextcloud/vue/components/NcModal'
 import NcProgressBar from '@nextcloud/vue/components/NcProgressBar'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconFileDownload from 'vue-material-design-icons/FileDownload.vue'
-import IconFileEdit from 'vue-material-design-icons/FileEdit.vue'
-import IconFileLock from 'vue-material-design-icons/FileLock.vue'
+import IconFileEditOutline from 'vue-material-design-icons/FileEditOutline.vue'
+import IconFileLockOutline from 'vue-material-design-icons/FileLockOutline.vue'
 import IconPoll from 'vue-material-design-icons/Poll.vue'
 import PollVotersDetails from './PollVotersDetails.vue'
 import { useId } from '../../composables/useId.ts'
@@ -157,9 +157,9 @@ export default {
 		PollVotersDetails,
 		// icons
 		IconCheck,
-		IconFileLock,
+		IconFileLockOutline,
 		IconFileDownload,
-		IconFileEdit,
+		IconFileEditOutline,
 		IconPoll,
 	},
 
diff --git a/src/components/RightSidebar/Participants/Participant.spec.js b/src/components/RightSidebar/Participants/Participant.spec.js
index 808cc94dbf9..576eb009610 100644
--- a/src/components/RightSidebar/Participants/Participant.spec.js
+++ b/src/components/RightSidebar/Participants/Participant.spec.js
@@ -15,10 +15,10 @@ import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
-import Microphone from 'vue-material-design-icons/Microphone.vue'
-import Phone from 'vue-material-design-icons/Phone.vue'
-import VideoIcon from 'vue-material-design-icons/Video.vue'
+import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
+import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
+import IconPhoneOutline from 'vue-material-design-icons/PhoneOutline.vue'
+import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import Participant from './Participant.vue'
 import { ATTENDEE, PARTICIPANT, WEBINAR } from '../../../constants.ts'
@@ -280,7 +280,7 @@ describe('Participant.vue', () => {
 
 	describe('call icons', () => {
 		let getParticipantRaisedHandMock
-		const components = [VideoIcon, Phone, Microphone, HandBackLeft]
+		const components = [IconVideoOutline, IconPhoneOutline, IconMicrophoneOutline, IconHandBackLeftOutline]
 
 		/**
 		 * Check which icons are currently rendered
@@ -315,26 +315,26 @@ describe('Participant.vue', () => {
 		})
 		test('renders video call icon', async () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.WITH_VIDEO
-			checkStateIconsRendered(participant, VideoIcon)
+			checkStateIconsRendered(participant, IconVideoOutline)
 		})
 		test('renders audio call icon', async () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.WITH_AUDIO
-			checkStateIconsRendered(participant, Microphone)
+			checkStateIconsRendered(participant, IconMicrophoneOutline)
 		})
 		test('renders phone call icon', async () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.WITH_PHONE
-			checkStateIconsRendered(participant, Phone)
+			checkStateIconsRendered(participant, IconPhoneOutline)
 		})
 		test('renders hand raised icon', async () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.WITH_VIDEO
 			getParticipantRaisedHandMock = jest.fn().mockReturnValue({ state: true })
 
-			checkStateIconsRendered(participant, HandBackLeft)
+			checkStateIconsRendered(participant, IconHandBackLeftOutline)
 			expect(getParticipantRaisedHandMock).toHaveBeenCalledWith(['session-id-alice'])
 		})
 		test('renders video call icon when joined with multiple', async () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.WITH_VIDEO | PARTICIPANT.CALL_FLAG.WITH_PHONE
-			checkStateIconsRendered(participant, VideoIcon)
+			checkStateIconsRendered(participant, IconVideoOutline)
 		})
 	})
 
diff --git a/src/components/SelectPhoneNumber.vue b/src/components/SelectPhoneNumber.vue
index 9f4eeac8e5a..a893f60f139 100644
--- a/src/components/SelectPhoneNumber.vue
+++ b/src/components/SelectPhoneNumber.vue
@@ -10,7 +10,7 @@
 		<template v-if="libPhoneNumber">
 			<NcListItem :name="name" @click="selectPhoneNumber">
 				<template #icon>
-					<Phone :size="AVATAR.SIZE.DEFAULT" />
+					<IconPhoneOutline :size="AVATAR.SIZE.DEFAULT" />
 				</template>
 				<template #subname>
 					{{ participantPhoneItem.phoneNumber }}
@@ -24,7 +24,7 @@
 import { t } from '@nextcloud/l10n'
 import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
-import Phone from 'vue-material-design-icons/Phone.vue'
+import IconPhoneOutline from 'vue-material-design-icons/PhoneOutline.vue'
 import Hint from './UIShared/Hint.vue'
 import { useLibphonenumber } from '../composables/useLibphonenumber.ts'
 import { ATTENDEE, AVATAR } from '../constants.ts'
@@ -36,7 +36,7 @@ export default {
 		Hint,
 		NcAppNavigationCaption,
 		NcListItem,
-		Phone,
+		IconPhoneOutline,
 	},
 
 	props: {
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 9b30ccff32c..fa86721e6cb 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -95,7 +95,7 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import IconChevronUp from 'vue-material-design-icons/ChevronUp.vue'
-import IconPhone from 'vue-material-design-icons/Phone.vue'
+import IconPhone from 'vue-material-design-icons/Phone.vue' // Filled used for non-silent calls
 import IconPhoneDialOutline from 'vue-material-design-icons/PhoneDialOutline.vue'
 import IconPhoneHangupOutline from 'vue-material-design-icons/PhoneHangupOutline.vue'
 import IconPhoneOffOutline from 'vue-material-design-icons/PhoneOffOutline.vue'
diff --git a/src/components/TopBar/CallTime.vue b/src/components/TopBar/CallTime.vue
index 2edeb0ac138..34aaf739d53 100644
--- a/src/components/TopBar/CallTime.vue
+++ b/src/components/TopBar/CallTime.vue
@@ -16,12 +16,9 @@
 				variant="tertiary"
 				@click="showPopover = !showPopover">
 				<template v-if="isRecording || isStartingRecording" #icon>
-					<IconRecordCircle v-if="isRecording"
+					<IconRecordCircleOutline
 						:size="20"
-						fill-color="#e9322d" />
-					<IconRecordCircle v-else
-						:size="20"
-						fill-color="var(--color-loading-light)" />
+						:fill-color="isRecording ? 'var(--color-border-error)' : 'var(--color-loading-light)'" />
 				</template>
 				<span class="call-time__text">
 					<span class="call-time__placeholder">{{ placeholderCallTime }}</span>
@@ -65,7 +62,7 @@ import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcPopover from '@nextcloud/vue/components/NcPopover'
-import IconRecordCircle from 'vue-material-design-icons/RecordCircle.vue'
+import IconRecordCircleOutline from 'vue-material-design-icons/RecordCircleOutline.vue'
 import IconStop from 'vue-material-design-icons/Stop.vue'
 import { useDocumentVisibility } from '../../composables/useDocumentVisibility.ts'
 import { useGetToken } from '../../composables/useGetToken.ts'
@@ -81,7 +78,7 @@ export default {
 		NcButton,
 		NcLoadingIcon,
 		NcPopover,
-		IconRecordCircle,
+		IconRecordCircleOutline,
 		IconStop,
 	},
 
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index f600354552f..d527db5dd1c 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -64,7 +64,7 @@
 				rel="noopener noreferrer"
 				:href="linkToFile">
 				<template #icon>
-					<IconFile :size="20" />
+					<IconFileOutline :size="20" />
 				</template>
 				{{ t('spreed', 'Go to file') }}
 			</NcActionLink>
@@ -146,7 +146,7 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
 import IconDotsCircle from 'vue-material-design-icons/DotsCircle.vue'
 import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
-import IconFile from 'vue-material-design-icons/File.vue'
+import IconFileOutline from 'vue-material-design-icons/FileOutline.vue'
 import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
 import IconFullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
 import IconRecordCircleOutline from 'vue-material-design-icons/RecordCircleOutline.vue'
@@ -179,7 +179,7 @@ export default {
 		IconCogOutline,
 		IconDotsCircle,
 		IconDotsHorizontal,
-		IconFile,
+		IconFileOutline,
 		IconFullscreen,
 		IconFullscreenExit,
 		IconRecordCircleOutline,
diff --git a/src/components/UIShared/ConversationActionsShortcut.vue b/src/components/UIShared/ConversationActionsShortcut.vue
index 31edc014c20..a526d14feae 100644
--- a/src/components/UIShared/ConversationActionsShortcut.vue
+++ b/src/components/UIShared/ConversationActionsShortcut.vue
@@ -13,7 +13,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import IconCheckUnderline from 'vue-material-design-icons/CheckUnderline.vue'
-import IconDelete from 'vue-material-design-icons/Delete.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import ConfirmDialog from '../../components/UIShared/ConfirmDialog.vue'
 import { CONVERSATION } from '../../constants.ts'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
@@ -113,7 +113,7 @@ async function showConfirmationDialog() {
 			<NcButton variant="error"
 				@click="showConfirmationDialog">
 				<template #icon>
-					<IconDelete />
+					<IconDeleteOutline />
 				</template>
 				{{ t('spreed', 'Delete now') }}
 			</NcButton>
diff --git a/src/components/UIShared/EditableTextField.vue b/src/components/UIShared/EditableTextField.vue
index 415ec2f8b93..4e4d3f59573 100644
--- a/src/components/UIShared/EditableTextField.vue
+++ b/src/components/UIShared/EditableTextField.vue
@@ -53,7 +53,7 @@
 				:aria-label="editButtonAriaLabel"
 				@click="handleEditText">
 				<template #icon>
-					<IconPencil :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 			</NcButton>
 		</template>
@@ -68,7 +68,7 @@ import NcRichContenteditable from '@nextcloud/vue/components/NcRichContenteditab
 import NcRichText from '@nextcloud/vue/components/NcRichText'
 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 IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import { parseSpecialSymbols } from '../../utils/textParse.ts'
 
 export default {
@@ -76,7 +76,7 @@ export default {
 	components: {
 		IconCheck,
 		IconClose,
-		IconPencil,
+		IconPencilOutline,
 		NcButton,
 		NcRichContenteditable,
 		NcRichText,
diff --git a/src/views/ForbiddenView.vue b/src/views/ForbiddenView.vue
index 7e533e32e7e..04438604c08 100644
--- a/src/views/ForbiddenView.vue
+++ b/src/views/ForbiddenView.vue
@@ -4,7 +4,7 @@
 -->
 <script lang="ts" setup>
 import { t } from '@nextcloud/l10n'
-import Octagon from 'vue-material-design-icons/Octagon.vue'
+import IconOctagonOutline from 'vue-material-design-icons/OctagonOutline.vue'
 import EmptyView from '../components/EmptyView.vue'
 </script>
 
@@ -12,7 +12,7 @@ import EmptyView from '../components/EmptyView.vue'
 	<EmptyView :name="t('spreed', 'You do not have permissions to access this conversation.')"
 		:description="t('spreed', 'Join a different conversation or start a new one.')">
 		<template #icon>
-			<Octagon />
+			<IconOctagonOutline />
 		</template>
 	</EmptyView>
 </template>

From dfa34ff17c4edc774e76569af2e7ed810520b634 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 22 Aug 2025 19:36:36 +0200
Subject: [PATCH 2/7] fix(NcIconSvgWrapper): fix colors and positioning

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../CallView/shared/VideoBottomBar.vue        | 38 +++++++++++--------
 src/components/UIShared/VolumeIndicator.vue   |  5 ++-
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index d4f29dc61c0..065b7fe57db 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -39,8 +39,8 @@
 					:disabled="isAudioButtonDisabled"
 					@click.stop="forceMute">
 					<template #icon>
-						<Microphone v-if="model.attributes.audioAvailable" :size="20" fill-color="#ffffff" />
-						<MicrophoneOff v-else :size="20" fill-color="#ffffff" />
+						<IconMicrophoneOutline v-if="model.attributes.audioAvailable" :size="20" />
+						<NcIconSvgWrapper v-else :svg="IconMicrophoneOffOutline" :size="20" />
 					</template>
 				</NcButton>
 
@@ -51,8 +51,8 @@
 					variant="tertiary-no-background"
 					@click.stop="toggleVideo">
 					<template #icon>
-						<VideoIcon v-if="isRemoteVideoEnabled" :size="20" fill-color="#ffffff" />
-						<VideoOff v-else :size="20" fill-color="#ffffff" />
+						<IconVideoOutline v-if="isRemoteVideoEnabled" :size="20" />
+						<IconVideoOffOutline v-else :size="20" />
 					</template>
 				</NcButton>
 
@@ -64,13 +64,13 @@
 					variant="tertiary-no-background"
 					@click.stop="switchToScreen">
 					<template #icon>
-						<IconMonitor :size="20" fill-color="#ffffff" />
+						<IconMonitor :size="20" />
 					</template>
 				</NcButton>
 
 				<div v-if="connectionStateFailedNoRestart"
 					class="status-indicator iceFailedIndicator">
-					<IconAlertCircleOutline :size="20" fill-color="#ffffff" />
+					<IconAlertCircleOutline :size="20" />
 				</div>
 			</TransitionWrapper>
 
@@ -88,14 +88,15 @@
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
-import Microphone from 'vue-material-design-icons/Microphone.vue'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
+import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
 import IconMonitor from 'vue-material-design-icons/Monitor.vue'
-import VideoIcon from 'vue-material-design-icons/Video.vue'
-import VideoOff from 'vue-material-design-icons/VideoOff.vue'
+import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
+import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
+import IconMicrophoneOffOutline from '../../../../img/material-icons/microphone-off-outline.svg?raw'
 import { PARTICIPANT } from '../../../constants.ts'
 import { useActorStore } from '../../../stores/actor.ts'
 import { useCallViewStore } from '../../../stores/callView.ts'
@@ -107,13 +108,13 @@ export default {
 	components: {
 		IconAlertCircleOutline,
 		IconHandBackLeftOutline,
-		Microphone,
-		MicrophoneOff,
+		IconMicrophoneOutline,
 		IconMonitor,
+		IconVideoOutline,
+		IconVideoOffOutline,
 		NcButton,
+		NcIconSvgWrapper,
 		TransitionWrapper,
-		VideoIcon,
-		VideoOff,
 	},
 
 	inheritAttrs: false,
@@ -182,6 +183,7 @@ export default {
 
 	setup() {
 		return {
+			IconMicrophoneOffOutline,
 			callViewStore: useCallViewStore(),
 			actorStore: useActorStore(),
 		}
@@ -386,6 +388,13 @@ export default {
 	opacity: .8 !important;
 }
 
+.audioIndicator,
+.videoIndicator,
+.screenSharingIndicator,
+.iceFailedIndicator {
+	color: #ffffff !important;
+}
+
 .audioIndicator[disabled],
 .videoIndicator {
 	opacity: .7;
@@ -397,5 +406,4 @@ export default {
 		opacity: 1;
 	}
 }
-
 </style>
diff --git a/src/components/UIShared/VolumeIndicator.vue b/src/components/UIShared/VolumeIndicator.vue
index 0539b14bc33..a3c93e877c8 100644
--- a/src/components/UIShared/VolumeIndicator.vue
+++ b/src/components/UIShared/VolumeIndicator.vue
@@ -14,7 +14,7 @@
 				inline
 				:svg="IconMicrophoneOffOutline"
 				:size="size"
-				:fill-color="primaryColor" />
+				:style="{ color: primaryColor }" />
 		</span>
 
 		<span v-if="audioPreviewAvailable"
@@ -26,7 +26,7 @@
 				inline
 				:svg="IconMicrophoneOffOutline"
 				:size="size"
-				:fill-color="overlayMutedColor" />
+				:style="{ color: overlayMutedColor }" />
 		</span>
 	</span>
 </template>
@@ -168,6 +168,7 @@ export default {
 }
 
 .volume-indicator-overlay {
+	display: inline-flex;
 	bottom: 0;
 	pointer-events: none;
 

From fdecef3bb1c57a305fa70a7453f191e06ac648ce Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 22 Aug 2025 19:35:38 +0200
Subject: [PATCH 3/7] fix(EventCard): render button after call start - 10
 minutes

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/Dashboard/EventCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dashboard/EventCard.vue b/src/components/Dashboard/EventCard.vue
index 87862b65cbf..735cb8a437b 100644
--- a/src/components/Dashboard/EventCard.vue
+++ b/src/components/Dashboard/EventCard.vue
@@ -49,7 +49,7 @@ const conversation = computed<ConversationFromEvent>(() => {
 
 const hasCall = computed(() => {
 	return (conversation.value.hasCall || props.eventRoom.roomActiveSince !== null)
-		&& props.eventRoom.start * 1000 <= (Date.now() - 600_000) // 10 minutes buffer
+		&& props.eventRoom.start * 1000 >= (Date.now() - 600_000) // 10 minutes buffer
 })
 
 const elapsedTime = computed(() => {

From abe8d279072ef8f2ab7732508c25c9659a014985 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 22 Aug 2025 17:06:25 +0200
Subject: [PATCH 4/7] fix: change icons to arrow-style

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationSettings/LobbySettings.vue          | 13 ++++++++++---
 src/components/ImportEmailsDialog.vue               |  5 +++--
 .../MediaSettings/VideoBackgroundEditor.vue         |  8 +++++---
 .../Message/MessageButtonsBar/MessageButtonsBar.vue | 12 ++++++------
 src/components/PollViewer/PollEditor.vue            |  9 +++++----
 src/components/PollViewer/PollViewer.vue            | 10 ++++++----
 src/components/RightSidebar/LobbyStatus.vue         |  5 +++--
 7 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/components/ConversationSettings/LobbySettings.vue b/src/components/ConversationSettings/LobbySettings.vue
index 49924ac0cd4..8b723eab673 100644
--- a/src/components/ConversationSettings/LobbySettings.vue
+++ b/src/components/ConversationSettings/LobbySettings.vue
@@ -54,7 +54,7 @@
 			</div>
 			<NcButton @click="isImportEmailsDialogOpen = true">
 				<template #icon>
-					<IconFileUploadOutline :size="20" />
+					<NcIconSvgWrapper :svg="IconFileUpload" :size="20" />
 				</template>
 				{{ t('spreed', 'Import email participants') }}
 			</NcButton>
@@ -85,10 +85,11 @@ import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
-import IconFileUploadOutline from 'vue-material-design-icons/FileUploadOutline.vue'
 import IconPoll from 'vue-material-design-icons/Poll.vue'
 import ImportEmailsDialog from '../ImportEmailsDialog.vue'
+import IconFileUpload from '../../../img/material-icons/file-upload.svg?raw'
 import { WEBINAR } from '../../constants.ts'
 import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../services/EventBus.ts'
@@ -98,7 +99,7 @@ export default {
 	name: 'LobbySettings',
 
 	components: {
-		IconFileUploadOutline,
+		NcIconSvgWrapper,
 		IconPoll,
 		ImportEmailsDialog,
 		NcButton,
@@ -114,6 +115,12 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			IconFileUpload,
+		}
+	},
+
 	data() {
 		return {
 			isLobbyStateLoading: false,
diff --git a/src/components/ImportEmailsDialog.vue b/src/components/ImportEmailsDialog.vue
index 41d03353133..9fb4060e7d2 100644
--- a/src/components/ImportEmailsDialog.vue
+++ b/src/components/ImportEmailsDialog.vue
@@ -11,9 +11,10 @@ import { n, t } from '@nextcloud/l10n'
 import { computed, ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import IconFileUpload from 'vue-material-design-icons/FileUpload.vue'
+import IconFileUpload from '../../img/material-icons/file-upload.svg?raw'
 import { importEmails } from '../services/participantsService.js'
 
 const props = defineProps<{
@@ -126,7 +127,7 @@ async function submitList(file: File | null) {
 			<NcButton class="import-list__button" @click="triggerImport">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="20" />
-					<IconFileUpload v-else :size="20" />
+					<NcIconSvgWrapper v-else :svg="IconFileUpload" :size="20" />
 				</template>
 				{{ t('spreed', 'Browse') }}
 			</NcButton>
diff --git a/src/components/MediaSettings/VideoBackgroundEditor.vue b/src/components/MediaSettings/VideoBackgroundEditor.vue
index 9515476e996..6f0f2870ec4 100644
--- a/src/components/MediaSettings/VideoBackgroundEditor.vue
+++ b/src/components/MediaSettings/VideoBackgroundEditor.vue
@@ -26,7 +26,7 @@
 			<template v-if="canUploadBackgrounds">
 				<button class="background-editor__element"
 					@click="clickImportInput">
-					<IconUpload :size="20" />
+					<NcIconSvgWrapper :svg="IconFileUpload" :size="20" inline />
 					{{ t('spreed', 'Upload') }}
 				</button>
 				<button class="background-editor__element"
@@ -68,11 +68,12 @@ import { showError } from '@nextcloud/dialogs'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { generateUrl, imagePath } from '@nextcloud/router'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 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' // Filled as in Files app icon
-import IconUpload from 'vue-material-design-icons/Upload.vue'
+import IconFileUpload from '../../../img/material-icons/file-upload.svg?raw'
 import { VIRTUAL_BACKGROUND } from '../../constants.ts'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
@@ -100,7 +101,7 @@ export default {
 		IconCancel,
 		IconCheckBold,
 		IconFolder,
-		IconUpload,
+		NcIconSvgWrapper,
 	},
 
 	props: {
@@ -119,6 +120,7 @@ export default {
 
 	setup() {
 		return {
+			IconFileUpload,
 			canUploadBackgrounds: getTalkConfig('local', 'call', 'can-upload-background'),
 			predefinedBackgrounds: getTalkConfig('local', 'call', 'predefined-backgrounds'),
 			predefinedBackgroundsV2: getTalkConfig('local', 'call', 'predefined-backgrounds-v2'),
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index 5c98381bb7b..5999336aae3 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -21,7 +21,7 @@
 				:title="t('spreed', 'Reply')"
 				@click="handleReply">
 				<template #icon>
-					<IconReply :size="16" />
+					<IconArrowLeftTop :size="16" />
 				</template>
 			</NcButton>
 			<NcActions :force-menu="true"
@@ -170,7 +170,7 @@
 						close-after-click
 						@click.stop="openForwarder">
 						<template #icon>
-							<IconShare :size="16" />
+							<IconArrowRightTop :size="16" />
 						</template>
 						{{ t('spreed', 'Forward message') }}
 					</NcActionButton>
@@ -321,6 +321,8 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'
 import IconAlarm from 'vue-material-design-icons/Alarm.vue'
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import IconArrowLeftTop from 'vue-material-design-icons/ArrowLeftTop.vue'
+import IconArrowRightTop from 'vue-material-design-icons/ArrowRightTop.vue'
 import IconBellOffOutline from 'vue-material-design-icons/BellOffOutline.vue'
 import IconCalendarClockOutline from 'vue-material-design-icons/CalendarClockOutline.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
@@ -338,8 +340,6 @@ import IconNoteEditOutline from 'vue-material-design-icons/NoteEditOutline.vue'
 import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
 import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
-import IconReply from 'vue-material-design-icons/Reply.vue'
-import IconShare from 'vue-material-design-icons/Share.vue'
 import IconTranslate from 'vue-material-design-icons/Translate.vue'
 import IconFileDownload from '../../../../../../img/material-icons/file-download.svg?raw'
 import { useGetThreadId } from '../../../../../composables/useGetThreadId.ts'
@@ -389,8 +389,8 @@ export default {
 		IconOpenInNew,
 		IconPencilOutline,
 		IconPlus,
-		IconReply,
-		IconShare,
+		IconArrowLeftTop,
+		IconArrowRightTop,
 		IconTranslate,
 	},
 
diff --git a/src/components/PollViewer/PollEditor.vue b/src/components/PollViewer/PollEditor.vue
index 5fe14e2eed6..fd10d4c9bc1 100644
--- a/src/components/PollViewer/PollEditor.vue
+++ b/src/components/PollViewer/PollEditor.vue
@@ -39,7 +39,7 @@
 				</NcActionButton>
 				<NcActionButton close-after-click @click="triggerImport">
 					<template #icon>
-						<IconFileUpload :size="20" />
+						<NcIconSvgWrapper :svg="IconFileUpload" :size="20" />
 					</template>
 					{{ t('spreed', 'Import draft from file') }}
 				</NcActionButton>
@@ -96,7 +96,7 @@
 				</NcActionButton>
 				<NcActionLink v-if="isFilled" :href="exportPollURI" :download="exportPollFileName">
 					<template #icon>
-						<IconFileDownload :size="20" />
+						<NcIconSvgWrapper :svg="IconFileDownload" :size="20" />
 					</template>
 					{{ t('spreed', 'Export draft to file') }}
 				</NcActionLink>
@@ -121,13 +121,14 @@ import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import Close from 'vue-material-design-icons/Close.vue'
-import IconFileDownload from 'vue-material-design-icons/FileDownload.vue'
 import IconFileEditOutline from 'vue-material-design-icons/FileEditOutline.vue'
-import IconFileUpload from 'vue-material-design-icons/FileUpload.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
+import IconFileDownload from '../../../img/material-icons/file-download.svg?raw'
+import IconFileUpload from '../../../img/material-icons/file-upload.svg?raw'
 import { useGetToken } from '../../composables/useGetToken.ts'
 import { POLL } from '../../constants.ts'
 import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
diff --git a/src/components/PollViewer/PollViewer.vue b/src/components/PollViewer/PollViewer.vue
index fb66fb7318b..de8418f33ed 100644
--- a/src/components/PollViewer/PollViewer.vue
+++ b/src/components/PollViewer/PollViewer.vue
@@ -82,7 +82,7 @@
 					</NcActionButton>
 					<NcActionLink v-if="supportPollDrafts" :href="exportPollURI" :download="exportPollFileName">
 						<template #icon>
-							<IconFileDownload :size="20" />
+							<NcIconSvgWrapper :svg="IconFileDownload" :size="20" />
 						</template>
 						{{ t('spreed', 'Export draft to file') }}
 					</NcActionLink>
@@ -104,7 +104,7 @@
 					</NcActionButton>
 					<NcActionLink :href="exportPollURI" :download="exportPollFileName">
 						<template #icon>
-							<IconFileDownload :size="20" />
+							<NcIconSvgWrapper :svg="IconFileDownload" :size="20" />
 						</template>
 						{{ t('spreed', 'Export draft to file') }}
 					</NcActionLink>
@@ -123,15 +123,16 @@ import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcModal from '@nextcloud/vue/components/NcModal'
 import NcProgressBar from '@nextcloud/vue/components/NcProgressBar'
 import IconCheck from 'vue-material-design-icons/Check.vue'
-import IconFileDownload from 'vue-material-design-icons/FileDownload.vue'
 import IconFileEditOutline from 'vue-material-design-icons/FileEditOutline.vue'
 import IconFileLockOutline from 'vue-material-design-icons/FileLockOutline.vue'
 import IconPoll from 'vue-material-design-icons/Poll.vue'
 import PollVotersDetails from './PollVotersDetails.vue'
+import IconFileDownload from '../../../img/material-icons/file-download.svg?raw'
 import { useId } from '../../composables/useId.ts'
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { POLL } from '../../constants.ts'
@@ -153,12 +154,12 @@ export default {
 		NcLoadingIcon,
 		NcModal,
 		NcButton,
+		NcIconSvgWrapper,
 		NcProgressBar,
 		PollVotersDetails,
 		// icons
 		IconCheck,
 		IconFileLockOutline,
-		IconFileDownload,
 		IconFileEditOutline,
 		IconPoll,
 	},
@@ -187,6 +188,7 @@ export default {
 		const exportPollFileName = `Talk Poll ${new Date().toISOString().slice(0, 10)}`
 
 		return {
+			IconFileDownload,
 			isInCall: useIsInCall(),
 			actorStore: useActorStore(),
 			pollsStore,
diff --git a/src/components/RightSidebar/LobbyStatus.vue b/src/components/RightSidebar/LobbyStatus.vue
index cbdf74b5868..961d3a622d0 100644
--- a/src/components/RightSidebar/LobbyStatus.vue
+++ b/src/components/RightSidebar/LobbyStatus.vue
@@ -8,9 +8,10 @@ import { t } from '@nextcloud/l10n'
 import { computed, ref } from 'vue'
 import { useStore } from 'vuex'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import IconFileUploadOutline from 'vue-material-design-icons/FileUploadOutline.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import IconLockOpenOutline from 'vue-material-design-icons/LockOpenOutline.vue'
 import ImportEmailsDialog from '../ImportEmailsDialog.vue'
+import IconFileUpload from '../../../img/material-icons/file-upload.svg?raw'
 import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 
 const props = defineProps<{
@@ -47,7 +48,7 @@ async function disableLobby() {
 
 		<NcButton v-if="supportImportEmails" @click="isImportEmailsDialogOpen = true">
 			<template #icon>
-				<IconFileUploadOutline :size="20" />
+				<NcIconSvgWrapper :svg="IconFileUpload" :size="20" />
 			</template>
 			{{ t('spreed', 'Import email participants') }}
 		</NcButton>

From 21392fd1a2fbd40c926655651e3f9e33e1ab695e Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 22 Aug 2025 19:50:48 +0200
Subject: [PATCH 5/7] fix(CallButton): always use text and red color for
 leave-call variants

- also fix scss warnings

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/CallView/BottomBar.vue |  2 +-
 src/components/TopBar/CallButton.vue  | 28 +++++++++++++++++----------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/CallView/BottomBar.vue b/src/components/CallView/BottomBar.vue
index bfed5a6d96b..76bb23c0253 100644
--- a/src/components/CallView/BottomBar.vue
+++ b/src/components/CallView/BottomBar.vue
@@ -209,7 +209,7 @@ useHotKey('r', toggleHandRaised)
 			</NcButton>
 		</div>
 
-		<CallButton shrink-on-mobile
+		<CallButton
 			:hide-text="isSidebar"
 			:is-screensharing="!!localMediaModel.attributes.localScreen" />
 	</div>
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index fa86721e6cb..fdd2873dc72 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -24,6 +24,7 @@
 
 	<NcButton v-else-if="showLeaveCallButton && canEndForAll && isPhoneRoom"
 		:aria-label="endCallLabel"
+		class="leave-call"
 		variant="error"
 		:disabled="loading"
 		@click="leaveCall(true)">
@@ -37,6 +38,7 @@
 	</NcButton>
 	<NcButton v-else-if="showLeaveCallButton && !canEndForAll && !isBreakoutRoom"
 		:aria-label="leaveCallLabel"
+		class="leave-call"
 		:variant="isScreensharing ? 'tertiary' : 'error'"
 		:disabled="loading"
 		@click="leaveCall(false)">
@@ -49,7 +51,7 @@
 		</template>
 	</NcButton>
 	<NcActions v-else-if="showLeaveCallButton && (canEndForAll || isBreakoutRoom)"
-		class="leave-call-actions--split"
+		class="leave-call leave-call-actions--split"
 		:disabled="loading"
 		force-name
 		placement="top-end"
@@ -485,6 +487,10 @@ export default {
 	// Overwrite default button colors for joining call
 	--join-call-background-color: var(--color-border-success);
 	--join-call-border-color: var(--color-success-text);
+	border-color: var(--join-call-border-color);
+	background-color: var(--join-call-background-color);
+	color: var(--color-primary-element-text) !important;
+
 	// Do not overwrite for dark theme
 	body[data-theme-dark] & {
 		--join-call-border-color: var(--color-success-hover);
@@ -494,25 +500,27 @@ export default {
 			--join-call-border-color: var(--color-success-hover);
 		}
 	}
-	border-color: var(--join-call-border-color);
-	background-color: var(--join-call-background-color);
-	color: var(--color-primary-element-text) !important;
 
 	&:hover:not(:disabled) {
 		background-color: var(--join-call-border-color);
 	}
 }
 
-.leave-call-actions--split {
-	gap: 1px;
+.leave-call.button-vue--error,
+.leave-call :deep(.button-vue--error) {
+	// Overwrite default button colors for leaving call
+	background-color: #FF3333 !important; // Nextcloud 31 --color-error
+	color: var(--color-primary-text) !important;
 
-	& :deep(.button-vue--error) {
-		// Overwrite default button colors for leaving call
-		background-color: #FF3333 !important; // Nextcloud 31 --color-error
-		color: var(--color-primary-text) !important;
+	&:hover:not(:disabled) {
+		background-color: var(--color-error-hover) !important;
 	}
 }
 
+.leave-call-actions--split {
+	gap: 1px !important;
+}
+
 .leave-call-actions--split :deep(.action-item--single) {
 	border-start-end-radius: 2px;
 	border-end-end-radius: 2px;

From 4f5dc3b141ba3d2d2afbcc8b53e6ae295c670793 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 25 Aug 2025 15:12:48 +0200
Subject: [PATCH 6/7] fix(notifications): change icons to outline

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 img/material-icons/volume-off-outline.svg     |  3 +++
 .../NotificationsSettings.vue                 | 27 ++++++++++++++-----
 .../ConversationsList/Conversation.vue        | 14 +++++-----
 .../MediaSettings/MediaDevicesSelector.vue    |  7 ++---
 4 files changed, 32 insertions(+), 19 deletions(-)
 create mode 100644 img/material-icons/volume-off-outline.svg

diff --git a/img/material-icons/volume-off-outline.svg b/img/material-icons/volume-off-outline.svg
new file mode 100644
index 00000000000..b202bf38ab0
--- /dev/null
+++ b/img/material-icons/volume-off-outline.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+	<path d="M792-56 671-177q-25 16-53 27.5T560-131v-82q14-5 27.5-10t25.5-12L480-368v208L280-360H120v-240h128L56-792l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 53-14.5 102T784-288ZM650-422l-90-90v-130q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650-422ZM480-592 376-696l104-104v208Zm-80 238v-94l-72-72H200v80h114l86 86Zm-36-130Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/ConversationSettings/NotificationsSettings.vue b/src/components/ConversationSettings/NotificationsSettings.vue
index 8c7c5253981..bbd4cf65161 100644
--- a/src/components/ConversationSettings/NotificationsSettings.vue
+++ b/src/components/ConversationSettings/NotificationsSettings.vue
@@ -7,12 +7,13 @@
 import type { Conversation } from '../../types/index.ts'
 
 import { t } from '@nextcloud/l10n'
-import { computed, reactive } from 'vue'
+import { computed, h, reactive } from 'vue'
 import { useStore } from 'vuex'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'
-import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
-import IconVolumeOff from 'vue-material-design-icons/VolumeOff.vue'
+import IconVolumeHighOutline from '../../../img/material-icons/volume-high-outline.svg?raw'
+import IconVolumeOffOutline from '../../../img/material-icons/volume-off-outline.svg?raw'
 import { PARTICIPANT } from '../../constants.ts'
 import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 
@@ -24,9 +25,21 @@ const supportImportantConversations = hasTalkFeature('local', 'important-convers
 const supportSensitiveConversations = hasTalkFeature('local', 'sensitive-conversations')
 
 const notificationLevels = [
-	{ value: PARTICIPANT.NOTIFY.ALWAYS, icon: IconVolumeHigh, label: t('spreed', 'All messages') },
-	{ value: PARTICIPANT.NOTIFY.MENTION, icon: IconAccountOutline, label: t('spreed', '@-mentions only') },
-	{ value: PARTICIPANT.NOTIFY.NEVER, icon: IconVolumeOff, label: t('spreed', 'Off') },
+	{
+		value: PARTICIPANT.NOTIFY.ALWAYS,
+		icon: h(NcIconSvgWrapper, { svg: IconVolumeHighOutline, inline: true }),
+		label: t('spreed', 'All messages'),
+	},
+	{
+		value: PARTICIPANT.NOTIFY.MENTION,
+		icon: IconAccountOutline,
+		label: t('spreed', '@-mentions only'),
+	},
+	{
+		value: PARTICIPANT.NOTIFY.NEVER,
+		icon: h(NcIconSvgWrapper, { svg: IconVolumeOffOutline, inline: true }),
+		label: t('spreed', 'Off'),
+	},
 ]
 
 const store = useStore()
@@ -111,7 +124,7 @@ const isSensitive = computed({
 			type="radio"
 			@update:model-value="setNotificationLevel">
 			<span class="radio-button">
-				<component :is="level.icon" />
+				<component :is="level.icon" :size="20" />
 				{{ level.label }}
 			</span>
 		</NcCheckboxRadioSwitch>
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index f1d95943da8..b24ef48acbb 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -261,12 +261,13 @@ import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import { useIsDarkTheme } from '@nextcloud/vue/composables/useIsDarkTheme'
-import { ref, toRefs } from 'vue'
+import { h, ref, toRefs } from 'vue'
 import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'
 import IconArchiveOffOutline from 'vue-material-design-icons/ArchiveOffOutline.vue'
@@ -285,9 +286,9 @@ import IconPhoneRingOutline from 'vue-material-design-icons/PhoneRingOutline.vue
 import IconShieldLockOutline from 'vue-material-design-icons/ShieldLockOutline.vue'
 import IconStar from 'vue-material-design-icons/Star.vue' // Filled for better indication
 import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
-import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
-import IconVolumeOff from 'vue-material-design-icons/VolumeOff.vue'
 import ConversationIcon from './../../ConversationIcon.vue'
+import IconVolumeHighOutline from '../../../../img/material-icons/volume-high-outline.svg?raw'
+import IconVolumeOffOutline from '../../../../img/material-icons/volume-off-outline.svg?raw'
 import { useConversationInfo } from '../../../composables/useConversationInfo.ts'
 import { AVATAR, CONVERSATION, PARTICIPANT } from '../../../constants.ts'
 import { hasTalkFeature } from '../../../services/CapabilitiesManager.ts'
@@ -324,13 +325,12 @@ export default {
 		IconPhoneRingOutline,
 		IconShieldLockOutline,
 		IconStar,
-		IconVolumeHigh,
-		IconVolumeOff,
 		IconVideo,
 		NcActionButton,
 		NcActionSeparator,
 		NcButton,
 		NcDialog,
+		NcIconSvgWrapper,
 		NcListItem,
 	},
 
@@ -541,12 +541,12 @@ export default {
 		notificationLevelIcon(value) {
 			switch (value) {
 				case PARTICIPANT.NOTIFY.ALWAYS:
-					return IconVolumeHigh
+					return h(NcIconSvgWrapper, { svg: IconVolumeHighOutline })
 				case PARTICIPANT.NOTIFY.MENTION:
 					return IconAccountOutline
 				case PARTICIPANT.NOTIFY.NEVER:
 				default:
-					return IconVolumeOff
+					return h(NcIconSvgWrapper, { svg: IconVolumeOffOutline })
 			}
 		},
 
diff --git a/src/components/MediaSettings/MediaDevicesSelector.vue b/src/components/MediaSettings/MediaDevicesSelector.vue
index 4de9bed9ead..d803965adc4 100644
--- a/src/components/MediaSettings/MediaDevicesSelector.vue
+++ b/src/components/MediaSettings/MediaDevicesSelector.vue
@@ -12,7 +12,7 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
 import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
-import IconVolumeOutline from '../../../img/material-icons/volume-high-outline.svg?raw'
+import IconVolumeHighOutline from '../../../img/material-icons/volume-high-outline.svg?raw'
 
 type NcSelectOption = { id: string | null, label: string }
 type MediaDeviceInfoWithFallbackLabel = MediaDeviceInfo & { fallbackLabel: string }
@@ -48,10 +48,7 @@ const deviceOptionsAvailable = computed(() => deviceOptions.value.length > 1)
 const deviceIcon = computed<ComponentPublicInstance | null>(() => {
 	switch (props.kind) {
 		case 'audioinput': return IconMicrophoneOutline
-		case 'audiooutput': return h(NcIconSvgWrapper, {
-			svg: IconVolumeOutline,
-			size: 20,
-		})
+		case 'audiooutput': return h(NcIconSvgWrapper, { svg: IconVolumeHighOutline, size: 20 })
 		case 'videoinput': return IconVideoOutline
 		default: return null
 	}

From aee20b9c10520c15b5612ab8c66bc65a4cc45c1a Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 25 Aug 2025 16:39:45 +0200
Subject: [PATCH 7/7] fix: improve indication of mic/camera/raised hand in call

- revert some outline icons

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/CallView/BottomBar.vue          |  4 +++-
 .../shared/LocalVideoControlButton.vue         |  6 +++---
 .../CallView/shared/VideoBottomBar.vue         | 18 +++++++++---------
 src/components/MediaSettings/MediaSettings.vue |  6 +++---
 .../RightSidebar/Participants/Participant.vue  |  6 +++---
 src/components/UIShared/VolumeIndicator.vue    |  8 ++++----
 6 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/CallView/BottomBar.vue b/src/components/CallView/BottomBar.vue
index 76bb23c0253..cef471dd4d3 100644
--- a/src/components/CallView/BottomBar.vue
+++ b/src/components/CallView/BottomBar.vue
@@ -11,6 +11,7 @@ import { useStore } from 'vuex'
 import NcButton from '@nextcloud/vue/components/NcButton'
 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' // Filled for better indication
 import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
 import IconViewGalleryOutline from 'vue-material-design-icons/ViewGalleryOutline.vue'
 import IconViewGridOutline from 'vue-material-design-icons/ViewGridOutline.vue'
@@ -204,7 +205,8 @@ useHotKey('r', toggleHandRaised)
 				<!-- The following icon is much bigger than all the others
 					so we reduce its size -->
 				<template #icon>
-					<IconHandBackLeftOutline :size="16" />
+					<IconHandBackLeft v-if="isHandRaised" :size="16" />
+					<IconHandBackLeftOutline v-else :size="16" />
 				</template>
 			</NcButton>
 		</div>
diff --git a/src/components/CallView/shared/LocalVideoControlButton.vue b/src/components/CallView/shared/LocalVideoControlButton.vue
index 5096604d3c8..136edbc1019 100644
--- a/src/components/CallView/shared/LocalVideoControlButton.vue
+++ b/src/components/CallView/shared/LocalVideoControlButton.vue
@@ -15,7 +15,7 @@
 			:disabled="!isVideoAllowed"
 			@click.stop="toggleVideo">
 			<template #icon>
-				<IconVideoOutline v-if="showVideoOn" :size="20" />
+				<IconVideo v-if="showVideoOn" :size="20" />
 				<IconVideoOffOutline v-else :size="20" />
 			</template>
 		</NcButton>
@@ -50,8 +50,8 @@ import NcActionCaption from '@nextcloud/vue/components/NcActionCaption'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import IconChevronUp from 'vue-material-design-icons/ChevronUp.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
 import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
-import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import { useDevices } from '../../../composables/useDevices.js'
 import { PARTICIPANT } from '../../../constants.ts'
 import BrowserStorage from '../../../services/BrowserStorage.js'
@@ -65,7 +65,7 @@ export default {
 		NcActionCaption,
 		NcButton,
 		IconChevronUp,
-		IconVideoOutline,
+		IconVideo,
 		IconVideoOffOutline,
 	},
 
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index 065b7fe57db..ccd75fe7ef4 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -10,7 +10,7 @@
 		@mouseleave.stop="mouseover = false">
 		<TransitionWrapper name="fade">
 			<div v-if="showRaiseHandIndicator" class="status-indicator raiseHandIndicator">
-				<IconHandBackLeftOutline :size="18" fill-color="#ffffff" />
+				<IconHandBackLeft :size="18" fill-color="#ffffff" />
 			</div>
 		</TransitionWrapper>
 
@@ -39,7 +39,7 @@
 					:disabled="isAudioButtonDisabled"
 					@click.stop="forceMute">
 					<template #icon>
-						<IconMicrophoneOutline v-if="model.attributes.audioAvailable" :size="20" />
+						<IconMicrophone v-if="model.attributes.audioAvailable" :size="20" />
 						<NcIconSvgWrapper v-else :svg="IconMicrophoneOffOutline" :size="20" />
 					</template>
 				</NcButton>
@@ -51,7 +51,7 @@
 					variant="tertiary-no-background"
 					@click.stop="toggleVideo">
 					<template #icon>
-						<IconVideoOutline v-if="isRemoteVideoEnabled" :size="20" />
+						<IconVideo v-if="isRemoteVideoEnabled" :size="20" />
 						<IconVideoOffOutline v-else :size="20" />
 					</template>
 				</NcButton>
@@ -90,11 +90,11 @@ import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
-import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
-import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
+import IconHandBackLeft from 'vue-material-design-icons/HandBackLeft.vue' // Filled for better indication
+import IconMicrophone from 'vue-material-design-icons/Microphone.vue' // Filled for better indication
 import IconMonitor from 'vue-material-design-icons/Monitor.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
 import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
-import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 import IconMicrophoneOffOutline from '../../../../img/material-icons/microphone-off-outline.svg?raw'
 import { PARTICIPANT } from '../../../constants.ts'
@@ -107,10 +107,10 @@ export default {
 
 	components: {
 		IconAlertCircleOutline,
-		IconHandBackLeftOutline,
-		IconMicrophoneOutline,
+		IconHandBackLeft,
+		IconMicrophone,
 		IconMonitor,
-		IconVideoOutline,
+		IconVideo,
 		IconVideoOffOutline,
 		NcButton,
 		NcIconSvgWrapper,
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 8fa5dbc7694..50a8f18da46 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -112,7 +112,7 @@
 							:disabled="!videoPreviewAvailable"
 							@click="toggleVideo">
 							<template #icon>
-								<IconVideoOutline v-if="videoOn" :size="20" />
+								<IconVideo v-if="videoOn" :size="20" />
 								<IconVideoOffOutline v-else :size="20" />
 							</template>
 						</NcButton>
@@ -224,8 +224,8 @@ import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcPopover from '@nextcloud/vue/components/NcPopover'
 import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
 import IconReflectHorizontal from 'vue-material-design-icons/ReflectHorizontal.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
 import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
-import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 import VideoBackground from '../CallView/shared/VideoBackground.vue'
 import SetGuestUsername from '../SetGuestUsername.vue'
@@ -275,7 +275,7 @@ export default {
 		SetGuestUsername,
 		// Icons
 		IconReflectHorizontal,
-		IconVideoOutline,
+		IconVideo,
 		IconVideoOffOutline,
 	},
 
diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
index a07a3481e7a..39a482df20b 100644
--- a/src/components/RightSidebar/Participants/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -328,7 +328,7 @@ import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import IconCrownOutline from 'vue-material-design-icons/CrownOutline.vue'
 import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import IconEmailOutline from 'vue-material-design-icons/EmailOutline.vue'
-import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
+import IconHandBackLeft from 'vue-material-design-icons/HandBackLeft.vue' // Filled for better indication
 import IconLockOpenVariantOutline from 'vue-material-design-icons/LockOpenVariantOutline.vue'
 import IconLockOutline from 'vue-material-design-icons/LockOutline.vue'
 import IconLockReset from 'vue-material-design-icons/LockReset.vue'
@@ -387,7 +387,7 @@ export default {
 		IconCrownOutline,
 		IconDeleteOutline,
 		IconEmailOutline,
-		IconHandBackLeftOutline,
+		IconHandBackLeft,
 		IconLockOutline,
 		IconLockOpenVariantOutline,
 		IconLockReset,
@@ -577,7 +577,7 @@ export default {
 			if (this.participant.inCall === PARTICIPANT.CALL_FLAG.DISCONNECTED) {
 				return null
 			} else if (this.isHandRaised) {
-				return { icon: IconHandBackLeftOutline, size: 18, title: t('spreed', 'Raised their hand') }
+				return { icon: IconHandBackLeft, size: 18, title: t('spreed', 'Raised their hand') }
 			} if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_VIDEO) {
 				return { icon: IconVideoOutline, size: 20, title: t('spreed', 'Joined with video') }
 			} else if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_PHONE) {
diff --git a/src/components/UIShared/VolumeIndicator.vue b/src/components/UIShared/VolumeIndicator.vue
index a3c93e877c8..7d10e7d1574 100644
--- a/src/components/UIShared/VolumeIndicator.vue
+++ b/src/components/UIShared/VolumeIndicator.vue
@@ -9,7 +9,7 @@
 		:class="{ overload: hasOverload }">
 		<span class="volume-indicator volume-indicator-primary"
 			:style="{ height: iconPrimaryHeight + 'px' }">
-			<IconMicrophoneOutline v-if="audioEnabled" :size="size" :fill-color="primaryColor" />
+			<IconMicrophone v-if="audioEnabled" :size="size" :fill-color="primaryColor" />
 			<NcIconSvgWrapper v-else
 				inline
 				:svg="IconMicrophoneOffOutline"
@@ -21,7 +21,7 @@
 			class="volume-indicator volume-indicator-overlay"
 			:class="{ 'volume-indicator-overlay-mute': !audioEnabled }"
 			:style="{ height: iconOverlayHeight + 'px' }">
-			<IconMicrophoneOutline v-if="audioEnabled" :size="size" :fill-color="overlayColor" />
+			<IconMicrophone v-if="audioEnabled" :size="size" :fill-color="overlayColor" />
 			<NcIconSvgWrapper v-else
 				inline
 				:svg="IconMicrophoneOffOutline"
@@ -33,14 +33,14 @@
 
 <script>
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
+import IconMicrophone from 'vue-material-design-icons/Microphone.vue' // Filled for better indication
 import IconMicrophoneOffOutline from '../../../img/material-icons/microphone-off-outline.svg?raw'
 
 export default {
 	name: 'VolumeIndicator',
 
 	components: {
-		IconMicrophoneOutline,
+		IconMicrophone,
 		NcIconSvgWrapper,
 	},