From 52fd57e1a0edbab389161eb510b272ad81b22dc0 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Wed, 13 Jul 2022 17:23:56 +0200
Subject: [PATCH 1/2] Fix custom SVGs to match the new lib version

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 .../CancelPresentation.vue                    | 24 +++++++----------
 .../missingMaterialDesignIcons/GridView.vue   | 26 ++++++++-----------
 .../missingMaterialDesignIcons/Lobby.vue      | 26 ++++++++-----------
 .../missingMaterialDesignIcons/MenuPeople.vue | 26 ++++++++-----------
 .../PresentToAll.vue                          | 24 +++++++----------
 .../PromotedView.vue                          | 26 ++++++++-----------
 6 files changed, 64 insertions(+), 88 deletions(-)

diff --git a/src/components/missingMaterialDesignIcons/CancelPresentation.vue b/src/components/missingMaterialDesignIcons/CancelPresentation.vue
index 4cca75f0d5a..066fdb50480 100644
--- a/src/components/missingMaterialDesignIcons/CancelPresentation.vue
+++ b/src/components/missingMaterialDesignIcons/CancelPresentation.vue
@@ -1,20 +1,20 @@
-<template functional>
-	<span :aria-hidden="props.decorative"
-		:aria-label="props.title"
-		:class="[data.class, data.staticClass]"
+<template>
+	<span :aria-hidden="!title"
+		:aria-label="title"
 		class="material-design-icon cancel-presentation-icon"
 		role="img"
-		v-bind="data.attrs"
-		v-on="listeners">
-		<svg :fill="props.fillColor"
+		v-bind="$attrs"
+		@click="$emit('click', $event)">
+		<svg :fill="fillColor"
 			class="material-design-icon__svg"
-			:width="props.size"
-			:height="props.size"
+			:width="size"
+			:height="size"
 			viewBox="0 0 24 24">
 			<path d="M0 0h24v24H0z" fill="none" />
 			<path d="M21 19.1H3V5h18v14.1zM21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
 			<path d="M21 19.1H3V5h18v14.1zM21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" fill="none" />
 			<path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41z" />
+			<title v-if="title">{{ title }}</title>
 		</svg>
 	</span>
 </template>
@@ -25,11 +25,7 @@ export default {
 	props: {
 		title: {
 			type: String,
-			default: 'Cancel Presentation icon',
-		},
-		decorative: {
-			type: Boolean,
-			default: false,
+			default: '',
 		},
 		fillColor: {
 			type: String,
diff --git a/src/components/missingMaterialDesignIcons/GridView.vue b/src/components/missingMaterialDesignIcons/GridView.vue
index 8f6346335d1..951e6dea4f7 100644
--- a/src/components/missingMaterialDesignIcons/GridView.vue
+++ b/src/components/missingMaterialDesignIcons/GridView.vue
@@ -1,15 +1,14 @@
-<template functional>
-	<span :aria-hidden="props.decorative"
-		:aria-label="props.title"
-		:class="[data.class, data.staticClass]"
-		class="material-design-icon present-to-all-icon"
+<template>
+	<span :aria-hidden="!title"
+		:aria-label="title"
+		class="material-design-icon grid-view-icon"
 		role="img"
-		v-bind="data.attrs"
-		v-on="listeners">
-		<svg :fill="props.fillColor"
+		v-bind="$attrs"
+		@click="$emit('click', $event)">
+		<svg :fill="fillColor"
 			class="material-design-icon__svg"
-			:width="props.size"
-			:height="props.size"
+			:width="size"
+			:height="size"
 			viewBox="0 0 16 16">
 			<g>
 				<rect width="7" height="7" rx="2" />
@@ -27,6 +26,7 @@
 					height="7"
 					rx="2" />
 			</g>
+			<title v-if="title">{{ title }}</title>
 		</svg>
 	</span>
 </template>
@@ -37,11 +37,7 @@ export default {
 	props: {
 		title: {
 			type: String,
-			default: 'Grid View icon',
-		},
-		decorative: {
-			type: Boolean,
-			default: false,
+			default: '',
 		},
 		fillColor: {
 			type: String,
diff --git a/src/components/missingMaterialDesignIcons/Lobby.vue b/src/components/missingMaterialDesignIcons/Lobby.vue
index 577a68d2b08..1786e360a1b 100644
--- a/src/components/missingMaterialDesignIcons/Lobby.vue
+++ b/src/components/missingMaterialDesignIcons/Lobby.vue
@@ -1,17 +1,17 @@
-<template functional>
-	<span :aria-hidden="props.decorative"
-		:aria-label="props.title"
-		:class="[data.class, data.staticClass]"
-		class="material-design-icon present-to-all-icon"
+<template>
+	<span :aria-hidden="!title"
+		:aria-label="title"
+		class="material-design-icon lobby-icon"
 		role="img"
-		v-bind="data.attrs"
-		v-on="listeners">
-		<svg :fill="props.fillColor"
+		v-bind="$attrs"
+		@click="$emit('click', $event)">
+		<svg :fill="fillColor"
 			class="material-design-icon__svg"
-			:width="props.size"
-			:height="props.size"
+			:width="size"
+			:height="size"
 			viewBox="0 0 24 24">
 			<path d="M2 17h20v2H2zm11.84-9.21c.1-.24.16-.51.16-.79 0-1.1-.9-2-2-2s-2 .9-2 2c0 .28.06.55.16.79C6.25 8.6 3.27 11.93 3 16h18c-.27-4.07-3.25-7.4-7.16-8.21z" />
+			<title v-if="title">{{ title }}</title>
 		</svg>
 	</span>
 </template>
@@ -22,11 +22,7 @@ export default {
 	props: {
 		title: {
 			type: String,
-			default: 'Lobby icon',
-		},
-		decorative: {
-			type: Boolean,
-			default: false,
+			default: '',
 		},
 		fillColor: {
 			type: String,
diff --git a/src/components/missingMaterialDesignIcons/MenuPeople.vue b/src/components/missingMaterialDesignIcons/MenuPeople.vue
index 86b4db0781a..4b74611bc5c 100644
--- a/src/components/missingMaterialDesignIcons/MenuPeople.vue
+++ b/src/components/missingMaterialDesignIcons/MenuPeople.vue
@@ -1,17 +1,17 @@
-<template functional>
-	<span :aria-hidden="props.decorative"
-		:aria-label="props.title"
-		:class="[data.class, data.staticClass]"
-		class="material-design-icon present-to-all-icon"
+<template>
+	<span :aria-hidden="!title"
+		:aria-label="title"
+		class="material-design-icon menu-people-icon"
 		role="img"
-		v-bind="data.attrs"
-		v-on="listeners">
-		<svg :fill="props.fillColor"
+		v-bind="$attrs"
+		@click="$emit('click', $event)">
+		<svg :fill="fillColor"
 			class="material-design-icon__svg"
-			:width="props.size"
-			:height="props.size"
+			:width="size"
+			:height="size"
 			viewBox="0 0 16 16">
 			<path d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm9.717 4.0059c-1.247 0-2.1428 1.0199-2.1428 1.998 0 0.9995 0.0726 1.7127 0.5718 2.4981 0.16 0.207 0.347 0.251 0.5 0.43 0.097 0.357 0.171 0.713 0.071 1.07-0.311 0.109-0.607 0.237-0.9065 0.357-0.364-0.195-0.7863-0.357-1.1503-0.5-0.05-0.2-0.0129-0.347 0.0371-0.535 0.0856-0.089 0.163-0.129 0.2558-0.215 0.2642-0.321 0.2793-0.864 0.2793-1.2496 0-0.5712-0.5135-0.9981-1.0703-0.9981-0.6211 0-1.0723 0.5126-1.0723 0.9981h-0.0136c0 0.4996 0.0353 0.8576 0.2851 1.2496 0.0714 0.107 0.1729 0.126 0.25 0.215 0.0481 0.179 0.0859 0.357 0.0352 0.535-0.4569 0.16-0.8863 0.357-1.2832 0.571-0.2999 0.214-0.1668 0.131-0.3574 0.822-0.0886 0.357 0.928 0.521 1.6562 0.578-0.0357 0.196-0.0857 0.457-0.2285 0.957-0.2285 0.893 3.1074 1.213 4.2834 1.213 1.735 0 4.507-0.325 4.269-1.213-0.371-1.385-0.15-1.221-0.701-1.642-0.778-0.467-1.749-0.834-2.568-1.143-0.107-0.398-0.03-0.692 0.07-1.07 0.168-0.179 0.357-0.259 0.514-0.43 0.492-0.6312 0.556-1.7299 0.556-2.4981 0-1.1323-1.019-1.998-2.14-1.998zm-9.717 0.9941c-0.554 0-1 0.446-1 1s0.446 1 1 1h4.2852c0.0891-0.1855 0.2-0.3648 0.3515-0.5195 0.3721-0.3801 0.9171-0.5988 1.4883-0.6192h0.0195c0.1729 0.017 0.3042 0.0597 0.4297 0.1426 0-0.3488 0.0747-0.6853 0.1953-1.0039h-6.7695zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h3.25c-0.0375-0.049-0.0777-0.09-0.1113-0.152-0.1221-0.228-0.1706-0.568-0.1035-0.838l0.0019-0.012 0.0039-0.012c0.0822-0.298 0.0556-0.322 0.1445-0.615 0.0313-0.103 0.1114-0.245 0.1993-0.371h-3.3848z" />
+			<title v-if="title">{{ title }}</title>
 		</svg>
 	</span>
 </template>
@@ -22,11 +22,7 @@ export default {
 	props: {
 		title: {
 			type: String,
-			default: 'Menu People icon',
-		},
-		decorative: {
-			type: Boolean,
-			default: false,
+			default: '',
 		},
 		fillColor: {
 			type: String,
diff --git a/src/components/missingMaterialDesignIcons/PresentToAll.vue b/src/components/missingMaterialDesignIcons/PresentToAll.vue
index ab1befec674..40c79135ed1 100644
--- a/src/components/missingMaterialDesignIcons/PresentToAll.vue
+++ b/src/components/missingMaterialDesignIcons/PresentToAll.vue
@@ -1,18 +1,18 @@
-<template functional>
-	<span :aria-hidden="props.decorative"
-		:aria-label="props.title"
-		:class="[data.class, data.staticClass]"
+<template>
+	<span :aria-hidden="!title"
+		:aria-label="title"
 		class="material-design-icon present-to-all-icon"
 		role="img"
-		v-bind="data.attrs"
-		v-on="listeners">
-		<svg :fill="props.fillColor"
+		v-bind="$attrs"
+		@click="$emit('click', $event)">
+		<svg :fill="fillColor"
 			class="material-design-icon__svg"
-			:width="props.size"
-			:height="props.size"
+			:width="size"
+			:height="size"
 			viewBox="0 0 24 24">
 			<path d="M0 0h24v24H0V0z" fill="none" />
 			<path d="M21 3H3c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h18c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 16.02H3V4.98h18v14.04zM10 12H8l4-4 4 4h-2v4h-4v-4z" />
+			<title v-if="title">{{ title }}</title>
 		</svg>
 	</span>
 </template>
@@ -23,11 +23,7 @@ export default {
 	props: {
 		title: {
 			type: String,
-			default: 'Present To All icon',
-		},
-		decorative: {
-			type: Boolean,
-			default: false,
+			default: '',
 		},
 		fillColor: {
 			type: String,
diff --git a/src/components/missingMaterialDesignIcons/PromotedView.vue b/src/components/missingMaterialDesignIcons/PromotedView.vue
index cd2c4d2d567..e1dee2b164f 100644
--- a/src/components/missingMaterialDesignIcons/PromotedView.vue
+++ b/src/components/missingMaterialDesignIcons/PromotedView.vue
@@ -1,15 +1,14 @@
-<template functional>
-	<span :aria-hidden="props.decorative"
-		:aria-label="props.title"
-		:class="[data.class, data.staticClass]"
-		class="material-design-icon present-to-all-icon"
+<template>
+	<span :aria-hidden="!title"
+		:aria-label="title"
+		class="material-design-icon promoted-view-icon"
 		role="img"
-		v-bind="data.attrs"
-		v-on="listeners">
-		<svg :fill="props.fillColor"
+		v-bind="$attrs"
+		@click="$emit('click', $event)">
+		<svg :fill="fillColor"
 			class="material-design-icon__svg"
-			:width="props.size"
-			:height="props.size"
+			:width="size"
+			:height="size"
 			viewBox="0 0 16 16">
 			<rect x="1"
 				y="1"
@@ -27,6 +26,7 @@
 				y="12"
 				width="3"
 				height="3" />
+			<title v-if="title">{{ title }}</title>
 		</svg>
 	</span>
 </template>
@@ -37,11 +37,7 @@ export default {
 	props: {
 		title: {
 			type: String,
-			default: 'Promoted View icon',
-		},
-		decorative: {
-			type: Boolean,
-			default: false,
+			default: '',
 		},
 		fillColor: {
 			type: String,

From bb40af310831bca4477270a3e3cdc86b2d04fb48 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Wed, 13 Jul 2022 17:36:23 +0200
Subject: [PATCH 2/2] Since v5.0.0 of the lib, the property decorative has been
 removed. This means the "decorative" is added to the span element, causing
 the HTML validation to fail:

> Attribute decorative not allowed on element span at this point.

Upstream commit
https://github.com/robcresswell/vue-material-design-icons/commit/c65d8ea786ea49210193cb3129c12a68ed6c0baf

> This patch also removes the default title, encouraging better
> accessibility by removing unhelpful titles that dont indicate usage. The
> `decorative` prop has been removed and any icons that do not have a
> meaningful title will be hidden from screen readers.

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 src/components/CallView/Grid/Grid.vue         | 12 +--
 .../CallView/shared/LocalMediaControls.vue    | 73 +++++--------------
 src/components/CallView/shared/Video.vue      |  2 -
 .../CallView/shared/VideoBottomBar.vue        | 26 ++-----
 src/components/ConversationIcon.vue           | 12 +--
 src/components/Description/Description.vue    | 12 +--
 .../DeviceChecker/DeviceChecker.vue           | 20 +----
 .../ConversationsList/Conversation.vue        | 20 ++---
 .../NewGroupConversation.vue                  |  4 +-
 .../SetContacts/SetContacts.vue               |  4 +-
 .../LeftSidebar/SearchBox/SearchBox.vue       |  4 +-
 src/components/LobbyScreen.vue                |  4 +-
 .../MessageButtonsBar/MessageButtonsBar.vue   | 28 ++-----
 .../Message/MessagePart/FilePreview.vue       |  7 +-
 .../AudioRecorder/AudioRecorder.vue           |  8 +-
 .../NewMessageForm/NewMessageForm.vue         | 12 +--
 src/components/Quote.vue                      |  4 +-
 .../Participant/Participant.vue               | 34 +++------
 .../ParticipantsSearchResults.vue             |  4 +-
 src/components/RightSidebar/RightSidebar.vue  | 20 ++---
 .../SharedItems/SharedItemsTab.vue            |  4 +-
 src/components/SetGuestUsername.vue           |  8 +-
 src/components/TopBar/CallButton.vue          | 24 ++----
 src/components/TopBar/TopBar.vue              | 24 ++----
 src/components/UploadEditor.vue               |  4 +-
 25 files changed, 91 insertions(+), 283 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 41e24cbed57..c4504ec5192 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -27,13 +27,9 @@
 			@click="handleClickStripeCollapse">
 			<ChevronDown v-if="stripeOpen"
 				fill-color="#ffffff"
-				decorative
-				title=""
 				:size="20" />
 			<ChevronUp v-else
 				fill-color="#ffffff"
-				decorative
-				title=""
 				:size="20" />
 		</button>
 		<transition :name="isStripe ? 'slide-down' : ''">
@@ -44,9 +40,7 @@
 						class="grid-navigation grid-navigation__previous"
 						:aria-label="t('spreed', 'Previous page of videos')"
 						@click="handleClickPrevious">
-						<ChevronLeft decorative
-							fill-color="#ffffff"
-							title=""
+						<ChevronLeft fill-color="#ffffff"
 							:size="20" />
 					</button>
 					<div ref="grid"
@@ -110,9 +104,7 @@
 						:class="{'stripe': isStripe}"
 						:aria-label="t('spreed', 'Next page of videos')"
 						@click="handleClickNext">
-						<ChevronRight decorative
-							fill-color="#ffffff"
-							title=""
+						<ChevronRight fill-color="#ffffff"
 							:size="20" />
 					</button>
 				</div>
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index a006f51559d..4ad0e2206e8 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -30,9 +30,7 @@
 					:open="showQualityWarningTooltip">
 					<button slot="trigger"
 						class="trigger">
-						<NetworkStrength2Alert decorative
-							fill-color="#e9322d"
-							title=""
+						<NetworkStrength2Alert fill-color="#e9322d"
 							:size="20"
 							@mouseover="mouseover = true"
 							@mouseleave="mouseover = false" />
@@ -64,14 +62,10 @@
 					@click.stop="toggleAudio">
 					<Microphone v-if="showMicrophoneOn"
 						:size="20"
-						title=""
-						fill-color="#ffffff"
-						decorative />
+						fill-color="#ffffff" />
 					<MicrophoneOff v-else
 						:size="20"
-						title=""
-						fill-color="#ffffff"
-						decorative />
+						fill-color="#ffffff" />
 				</button>
 				<span v-show="model.attributes.audioAvailable"
 					ref="volumeIndicator"
@@ -87,14 +81,10 @@
 				@click.stop="toggleVideo">
 				<VideoIcon v-if="showVideoOn"
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 				<VideoOff v-else
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 			</button>
 			<button v-if="isVirtualBackgroundAvailable && !showActions"
 				v-tooltip="toggleVirtualBackgroundButtonLabel"
@@ -103,14 +93,10 @@
 				@click.stop="toggleVirtualBackground">
 				<Blur v-if="isVirtualBackgroundEnabled"
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 				<BlurOff v-else
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 			</button>
 			<Actions v-if="!screenSharingButtonHidden"
 				id="screensharing-button"
@@ -127,40 +113,30 @@
 				<CancelPresentation v-if="model.attributes.localScreen"
 					slot="icon"
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 				<PresentToAll v-else
 					slot="icon"
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 				<!-- /Actions button icon -->
 				<!-- Actions -->
 				<ActionButton v-if="!screenSharingMenuOpen"
 					@click.stop="toggleScreenSharingMenu">
 					<PresentToAll slot="icon"
 						:size="20"
-						title=""
-						fill-color="#ffffff"
-						decorative />
+						fill-color="#ffffff" />
 					{{ screenSharingButtonTooltip }}
 				</ActionButton>
 				<ActionButton v-if="model.attributes.localScreen"
 					@click="showScreen">
 					<Monitor slot="icon"
-						:size="20"
-						title=""
-						decorative />
+						:size="20" />
 					{{ t('spreed', 'Show your screen') }}
 				</ActionButton>
 				<ActionButton v-if="model.attributes.localScreen"
 					@click="stopScreen">
 					<CancelPresentation slot="icon"
-						:size="20"
-						title=""
-						decorative />
+						:size="20" />
 					{{ t('spreed', 'Stop screensharing') }}
 				</ActionButton>
 			</Actions>
@@ -174,9 +150,7 @@
 				@click.stop="toggleHandRaised">
 				<!-- The following icon is much bigger than all the others
 						so we reduce its size -->
-				<HandBackLeft decorative
-					title=""
-					:size="18"
+				<HandBackLeft :size="18"
 					fill-color="#ffffff" />
 			</button>
 			<Actions v-if="showActions"
@@ -185,7 +159,6 @@
 				:aria-label="t('spreed', 'More actions')">
 				<DotsHorizontal slot="icon"
 					:size="20"
-					decorative
 					fill-color="#ffffff" />
 
 				<ActionButton :close-after-click="true"
@@ -193,8 +166,6 @@
 					<!-- The following icon is much bigger than all the others
 						so we reduce its size -->
 					<HandBackLeft slot="icon"
-						decorative
-						title=""
 						:size="18" />
 					{{ raiseHandButtonLabel }}
 				</ActionButton>
@@ -203,14 +174,10 @@
 					@click="toggleVirtualBackground">
 					<BlurOff v-if="isVirtualBackgroundEnabled"
 						slot="icon"
-						:size="20"
-						decorative
-						title="" />
+						:size="20" />
 					<Blur v-else
 						slot="icon"
-						:size="20"
-						decorative
-						title="" />
+						:size="20" />
 					{{ toggleVirtualBackgroundButtonLabel }}
 				</ActionButton>
 				<!-- Call layout switcher -->
@@ -219,21 +186,17 @@
 					@click="changeView">
 					<GridView v-if="isGrid"
 						slot="icon"
-						:size="20"
-						decorative />
+						:size="20" />
 					<PromotedView v-else
 						slot="icon"
-						:size="20"
-						decorative />
+						:size="20" />
 					{{ changeViewText }}
 				</ActionButton>
 				<ActionSeparator />
 				<ActionButton :close-after-click="true"
 					@click="showSettings">
 					<Cog slot="icon"
-						decorative
-						:size="20"
-						title="" />
+						:size="20" />
 					{{ t('spreed', 'Devices settings') }}
 				</ActionButton>
 			</Actions>
diff --git a/src/components/CallView/shared/Video.vue b/src/components/CallView/shared/Video.vue
index 6f60f5b4531..73f24decdb1 100644
--- a/src/components/CallView/shared/Video.vue
+++ b/src/components/CallView/shared/Video.vue
@@ -70,8 +70,6 @@
 				:key="'placeholderForPromoted'"
 				class="placeholder-for-promoted">
 				<AccountCircle v-if="isPromoted || isSelected"
-					decorative
-					title=""
 					fill-color="#FFFFFF"
 					:size="36" />
 			</div>
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index 0dc05a2db68..24c18e87b01 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -26,8 +26,6 @@
 			<div v-if="!connectionStateFailedNoRestart && model.attributes.raisedHand.state"
 				class="bottom-bar__statusIndicator">
 				<HandBackLeft class="handIndicator"
-					decorative
-					title=""
 					size="18px"
 					fill-color="#ffffff" />
 			</div>
@@ -54,14 +52,10 @@
 						@click.stop="forceMute">
 						<Microphone v-if="showMicrophone"
 							:size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 						<MicrophoneOff v-if="showMicrophoneOff"
 							:size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 					</button>
 					<button v-show="!connectionStateFailedNoRestart && model.attributes.videoAvailable"
 						v-tooltip="videoButtonTooltip"
@@ -69,14 +63,10 @@
 						@click.stop="toggleVideo">
 						<VideoIcon v-if="showVideoButton"
 							:size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 						<VideoOff v-if="!showVideoButton"
 							:size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 					</button>
 					<button v-show="!connectionStateFailedNoRestart"
 						v-tooltip="t('spreed', 'Show screen')"
@@ -84,18 +74,14 @@
 						:class="screenSharingButtonClass"
 						@click.stop="switchToScreen">
 						<Monitor :size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 					</button>
 					<button v-show="connectionStateFailedNoRestart"
 						class="iceFailedIndicator"
 						:class="{ 'not-failed': !connectionStateFailedNoRestart }"
 						disabled="true">
 						<AlertCircle :size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 					</button>
 				</div>
 			</transition>
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 32d6ae99329..cbee8980c59 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -37,18 +37,14 @@
 			class="conversation-icon__avatar" />
 		<div v-if="showCall"
 			class="overlap-icon">
-			<Video decorative
-				:size="20"
-				:fill-color="'#E9322D'"
-				title="" />
+			<Video :size="20"
+				:fill-color="'#E9322D'" />
 			<span class="hidden-visually">{{ t('spreed', 'Call in progress') }}</span>
 		</div>
 		<div v-else-if="showFavorite"
 			class="overlap-icon">
-			<Star decorative
-				:size="20"
-				:fill-color="'#FFCC00'"
-				title="" />
+			<Star :size="20"
+				:fill-color="'#FFCC00'" />
 			<span class="hidden-visually">{{ t('spreed', 'Favorite') }}</span>
 		</div>
 	</div>
diff --git a/src/components/Description/Description.vue b/src/components/Description/Description.vue
index 45afadbe72a..252fd8d5e60 100644
--- a/src/components/Description/Description.vue
+++ b/src/components/Description/Description.vue
@@ -39,9 +39,7 @@
 					:aria-label="t('spreed', 'Cancel editing description')"
 					@click="handleCancelEditing">
 					<template #icon>
-						<Close decorative
-							title=""
-							:size="20" />
+						<Close :size="20" />
 					</template>
 				</Button>
 				<Button type="primary"
@@ -49,9 +47,7 @@
 					:disabled="!canSubmit"
 					@click="handleSubmitDescription">
 					<template #icon>
-						<Check decorative
-							title=""
-							:size="20" />
+						<Check :size="20" />
 					</template>
 				</Button>
 				<div v-if="showCountDown"
@@ -67,9 +63,7 @@
 				:aria-label="t('spreed', 'Edit conversation description')"
 				@click="handleEditDescription">
 				<template #icon>
-					<Pencil decorative
-						title=""
-						:size="20" />
+					<Pencil :size="20" />
 				</template>
 			</Button>
 		</template>
diff --git a/src/components/DeviceChecker/DeviceChecker.vue b/src/components/DeviceChecker/DeviceChecker.vue
index 3ca0cca16b4..94b681bcc77 100644
--- a/src/components/DeviceChecker/DeviceChecker.vue
+++ b/src/components/DeviceChecker/DeviceChecker.vue
@@ -67,12 +67,8 @@
 					@click="toggleAudio">
 					<template #icon>
 						<Microphone v-if="audioOn"
-							title=""
-							decorative
 							:size="20" />
 						<MicrophoneOff v-else
-							title=""
-							decorative
 							:size="20" />
 					</template>
 				</Button>
@@ -90,12 +86,8 @@
 					@click="toggleVideo">
 					<template #icon>
 						<Video v-if="videoOn"
-							title=""
-							decorative
 							:size="20" />
 						<VideoOff v-else
-							title=""
-							decorative
 							:size="20" />
 					</template>
 				</Button>
@@ -109,13 +101,9 @@
 					@click="toggleBlur">
 					<template #icon>
 						<Blur v-if="blurOn"
-							:size="20"
-							decorative
-							title="" />
+							:size="20" />
 						<BlurOff v-else
-							:size="20"
-							decorative
-							title="" />
+							:size="20" />
 					</template>
 				</Button>
 			</div>
@@ -127,9 +115,7 @@
 					class="select-devices"
 					@click="showDeviceSelection = true">
 					<template #icon>
-						<Cog title=""
-							decorative
-							:size="20" />
+						<Cog :size="20" />
 					</template>
 					{{ t('spreed', 'Choose devices') }}
 				</Button>
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index d3d8cbfecf0..fc693236139 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -48,15 +48,11 @@
 				@click.prevent.exact="toggleFavoriteConversation">
 				<Star v-if="item.isFavorite"
 					slot="icon"
-					decorative
-					:size="20"
-					title="" />
+					:size="20" />
 				<Star v-else
 					slot="icon"
-					decorative
 					:size="20"
-					:fill-color="'#FFCC00'"
-					title="" />
+					:fill-color="'#FFCC00'" />
 				{{ labelFavorite }}
 			</ActionButton>
 			<ActionButton icon="icon-clippy"
@@ -66,18 +62,14 @@
 			<ActionButton :close-after-click="true"
 				@click.prevent.exact="markConversationAsRead">
 				<template #icon>
-					<EyeOutline decorative
-						title=""
-						:size="16" />
+					<EyeOutline :size="16" />
 				</template>
 				{{ t('spreed', 'Mark as read') }}
 			</ActionButton>
 			<ActionButton :close-after-click="true"
 				@click.prevent.exact="showConversationSettings">
 				<Cog slot="icon"
-					decorative
-					:size="20"
-					title="" />
+					:size="20" />
 				{{ t('spreed', 'Conversation settings') }}
 			</ActionButton>
 			<ActionButton v-if="canLeaveConversation"
@@ -91,9 +83,7 @@
 				class="critical"
 				@click.prevent.exact="deleteConversation">
 				<template #icon>
-					<Delete decorative
-						title=""
-						:size="16" />
+					<Delete :size="16" />
 				</template>
 				{{ t('spreed', 'Delete conversation') }}
 			</ActionButton>
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 8c7bdb44696..ecae3d5cee4 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -29,9 +29,7 @@
 			:aria-label="t('spreed', 'Create a new group conversation')"
 			@click="showModal">
 			<template #icon>
-				<Plus decorative
-					title=""
-					:size="20" />
+				<Plus :size="20" />
 			</template>
 		</Button>
 		<!-- New group form -->
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
index 3865fa2903a..30f55a41d18 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
@@ -36,9 +36,7 @@
 			:aria-label="cancelSearchLabel"
 			@click="abortSearch">
 			<template #icon>
-				<Close decorative
-					title=""
-					:size="20" />
+				<Close :size="20" />
 			</template>
 		</Button>
 		<transition-group v-if="hasSelectedParticipants"
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index e637402a802..3fe5f4271c8 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -34,9 +34,7 @@
 			:aria-label="cancelSearchLabel"
 			@click="abortSearch">
 			<template #icon>
-				<Close decorative
-					title=""
-					:size="20" />
+				<Close :size="20" />
 			</template>
 		</Button>
 	</form>
diff --git a/src/components/LobbyScreen.vue b/src/components/LobbyScreen.vue
index 5aa726c2c25..7b7a9490df7 100644
--- a/src/components/LobbyScreen.vue
+++ b/src/components/LobbyScreen.vue
@@ -21,9 +21,7 @@
 <template>
 	<div class="lobby">
 		<div class="lobby emptycontent">
-			<Lobby decorative
-				:size="64"
-				title="" />
+			<Lobby :size="64" />
 			<h2>{{ currentConversationName }}</h2>
 
 			<p class="lobby__timer">
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index a5c87774a7b..8d6d6b6e11e 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -29,17 +29,13 @@
 				:aria-label="t('spreed', 'Add a reaction to this message')"
 				@click="openReactionsMenu">
 				<template #icon>
-					<EmoticonOutline decorative
-						:size="20"
-						title="" />
+					<EmoticonOutline :size="20" />
 				</template>
 			</Button>
 			<Actions v-show="isReplyable">
 				<ActionButton @click.stop="handleReply">
 					<template #icon>
-						<Reply decorative
-							title=""
-							:size="16" />
+						<Reply :size="16" />
 					</template>
 					{{ t('spreed', 'Reply') }}
 				</ActionButton>
@@ -63,27 +59,21 @@
 				<ActionButton :close-after-click="true"
 					@click.stop="handleMarkAsUnread">
 					<template #icon>
-						<EyeOffOutline decorative
-							title=""
-							:size="16" />
+						<EyeOffOutline :size="16" />
 					</template>
 					{{ t('spreed', 'Mark as unread') }}
 				</ActionButton>
 				<ActionLink v-if="linkToFile"
 					:href="linkToFile">
 					<File slot="icon"
-						:size="20"
-						title=""
-						decorative />
+						:size="20" />
 					{{ t('spreed', 'Go to file') }}
 				</ActionLink>
 				<ActionButton v-if="!isCurrentGuest && !isFileShare && !isDeletedMessage"
 					:close-after-click="true"
 					@click.stop="showForwarder = true">
 					<Share slot="icon"
-						:size="16"
-						decorative
-						title="" />
+						:size="16" />
 					{{ t('spreed', 'Forward message') }}
 				</ActionButton>
 				<ActionSeparator v-if="messageActions.length > 0" />
@@ -111,9 +101,7 @@
 				:aria-label="t('spreed', 'Close reactions menu')"
 				@click="closeReactionsMenu">
 				<template #icon>
-					<ArrowLeft decorative
-						:size="20"
-						title="" />
+					<ArrowLeft :size="20" />
 				</template>
 			</Button>
 			<Button type="tertiary"
@@ -137,9 +125,7 @@
 				<Button type="tertiary"
 					:aria-label="t('spreed', 'React with another emoji')">
 					<template #icon>
-						<Plus decorative
-							:size="20"
-							title="" />
+						<Plus :size="20" />
 					</template>
 				</Button>
 			</EmojiPicker>
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index cc8b713ff2d..383bf3c6af5 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -36,9 +36,7 @@
 			:class="{'playable': isPlayable}">
 			<span v-if="isPlayable && !smallPreview" class="play-video-button">
 				<PlayCircleOutline :size="48"
-					decorative
-					fill-color="#ffffff"
-					title="" />
+					fill-color="#ffffff" />
 			</span>
 			<img v-if="!failed"
 				v-tooltip="previewTooltip"
@@ -61,8 +59,7 @@
 			:aria-label="removeAriaLabel"
 			@click="$emit('remove-file', id)">
 			<template #icon>
-				<Close decorative
-					title="" />
+				<Close />
 			</template>
 		</Button>
 		<ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" />
diff --git a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
index 43fa1c80f4e..01977880d9e 100644
--- a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
+++ b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
@@ -31,9 +31,7 @@
 			:disabled="!canStartRecording"
 			@click="start">
 			<template #icon>
-				<Microphone :size="16"
-					title=""
-					decorative />
+				<Microphone :size="16" />
 			</template>
 		</Button>
 		<div v-else class="wrapper">
@@ -45,9 +43,7 @@
 				:aria-label="abortRecordingTooltip"
 				@click="abortRecording">
 				<template #icon>
-					<Close :size="16"
-						title=""
-						decorative />
+					<Close :size="16" />
 				</template>
 			</Button>
 			<div class="audio-recorder__info">
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 2dc8d3164e2..9b27799b226 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -43,9 +43,7 @@
 						:aria-label="t('spreed', 'Share files to the conversation')"
 						:aria-haspopup="true">
 						<Paperclip slot="icon"
-							:size="16"
-							decorative
-							title="" />
+							:size="16" />
 						<ActionButton v-if="canUploadFiles"
 							:close-after-click="true"
 							icon="icon-upload"
@@ -71,9 +69,7 @@
 								type="tertiary-no-background"
 								:aria-haspopup="true">
 								<template #icon>
-									<EmoticonOutline :size="16"
-										decorative
-										title="" />
+									<EmoticonOutline :size="16" />
 								</template>
 							</Button>
 						</EmojiPicker>
@@ -83,9 +79,7 @@
 							:aria-label="t('spreed', 'Add emoji')"
 							:disabled="true">
 							<template #icon>
-								<EmoticonOutline :size="16"
-									decorative
-									title="" />
+								<EmoticonOutline :size="16" />
 							</template>
 						</Button>
 					</div>
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index a0e1d366b2d..25e290a7f4a 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -49,9 +49,7 @@ components.
 				:aria-label="cancelQuoteLabel"
 				@click="handleAbortReply">
 				<template #icon>
-					<Close decorative
-						title=""
-						:size="20" />
+					<Close :size="20" />
 				</template>
 			</Button>
 		</div>
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index d5b166989c2..3fc7ea85a18 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -77,22 +77,14 @@
 			class="participant-row__callstate-icon">
 			<span class="hidden-visually">{{ callIconTooltip }}</span>
 			<Microphone v-if="callIcon === 'audio'"
-				:size="20"
-				title=""
-				decorative />
+				:size="20" />
 			<Phone v-if="callIcon === 'phone'"
-				:size="20"
-				title=""
-				decorative />
+				:size="20" />
 			<Video v-if="callIcon === 'video'"
-				:size="20"
-				title=""
-				decorative />
+				:size="20" />
 			<!-- The following icon is much bigger than all the others
 						so we reduce its size -->
 			<HandBackLeft v-if="callIcon === 'hand'"
-				decorative
-				title=""
 				:size="18" />
 		</div>
 
@@ -104,17 +96,13 @@
 			class="participant-row__actions">
 			<template #icon>
 				<LockOpenVariant v-if="actionIcon === 'LockOpenVariant'"
-					:size="20"
-					decorative />
+					:size="20" />
 				<Lock v-else-if="actionIcon === 'Lock'"
-					:size="20"
-					decorative />
+					:size="20" />
 				<Tune v-else-if="actionIcon === 'Tune'"
-					:size="20"
-					decorative />
+					:size="20" />
 				<DotsHorizontal v-else
-					:size="20"
-					decorative />
+					:size="20" />
 			</template>
 			<ActionText v-if="attendeePin"
 				:title="t('spreed', 'Dial-in PIN')"
@@ -125,9 +113,7 @@
 				:close-after-click="true"
 				@click="demoteFromModerator">
 				<template #icon>
-					<Account :size="20"
-						title=""
-						decorative />
+					<Account :size="20" />
 					{{ t('spreed', 'Demote from moderator') }}
 				</template>
 			</ActionButton>
@@ -135,9 +121,7 @@
 				:close-after-click="true"
 				@click="promoteToModerator">
 				<template #icon>
-					<Crown :size="20"
-						title=""
-						decorative />
+					<Crown :size="20" />
 				</template>
 				{{ t('spreed', 'Promote to moderator') }}
 			</ActionButton>
diff --git a/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue b/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue
index 7763ff0ccb2..3215a72e580 100644
--- a/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue
@@ -56,9 +56,7 @@
 					@click="runIntegration(integration)">
 					<!-- FIXME: dynamically change the material design icon -->
 					<template #icon>
-						<AccountPlus decorative
-							title=""
-							:size="20" />
+						<AccountPlus :size="20" />
 					</template>
 					{{ integration.label }}
 				</Button>
diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index f671d2c364c..1ad91113d32 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -44,9 +44,7 @@
 			:order="1"
 			:name="t('spreed', 'Chat')">
 			<template slot="icon">
-				<Message decorative
-					:size="20"
-					title="" />
+				<Message :size="20" />
 			</template>
 			<ChatView :is-visible="opened" />
 		</AppSidebarTab>
@@ -56,9 +54,7 @@
 			:order="2"
 			:name="participantsText">
 			<template slot="icon">
-				<AccountMultiple decorative
-					:size="20"
-					title="" />
+				<AccountMultiple :size="20" />
 			</template>
 			<ParticipantsTab :is-active="activeTab === 'participants'"
 				:can-search="canSearchParticipants"
@@ -69,9 +65,7 @@
 			:order="3"
 			:name="t('spreed', 'Details')">
 			<template slot="icon">
-				<InformationOutline decorative
-					:size="20"
-					title="" />
+				<InformationOutline :size="20" />
 			</template>
 			<SetGuestUsername v-if="!getUserId" />
 			<SipSettings v-if="showSIPSettings"
@@ -81,9 +75,7 @@
 				<div id="app-settings-header">
 					<Button type="tertiary" @click="showSettings">
 						<template #icon>
-							<CogIcon decorative
-								title=""
-								:size="20" />
+							<CogIcon :size="20" />
 						</template>
 						{{ t('spreed', 'Settings') }}
 					</Button>
@@ -96,9 +88,7 @@
 			:order="4"
 			:name="t('spreed', 'Shared items')">
 			<template slot="icon">
-				<FolderMultipleImage decorative
-					:size="20"
-					title="" />
+				<FolderMultipleImage :size="20" />
 			</template>
 			<SharedItemsTab :active="activeTab === 'shared-items'" />
 		</AppSidebarTab>
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index 67f5683c281..6a35e6379f9 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -33,9 +33,7 @@
 					:wide="true"
 					@click="showMore(type)">
 					<template #icon>
-						<DotsHorizontal :size="20"
-							decorative
-							title="" />
+						<DotsHorizontal :size="20" />
 					</template>
 					{{ getButtonTitle(type) }}
 				</Button>
diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue
index 4fa301c8e53..2f1c8f60f62 100644
--- a/src/components/SetGuestUsername.vue
+++ b/src/components/SetGuestUsername.vue
@@ -28,9 +28,7 @@
 		<Button @click.prevent="handleEditUsername">
 			{{ t('spreed', 'Edit') }}
 			<template #icon>
-				<Pencil :size="20"
-					title=""
-					decorative />
+				<Pencil :size="20" />
 			</template>
 		</Button>
 		<div v-if="isEditingUsername"
@@ -47,9 +45,7 @@
 				:aria-label="t('spreed', 'Save name')"
 				type="tertiary">
 				<template #icon>
-					<ArrowRight :size="20"
-						title=""
-						decorative />
+					<ArrowRight :size="20" />
 				</template>
 			</Button>
 		</div>
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 6538e5a129e..754e3a9622e 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -34,9 +34,7 @@
 			:type="startCallButtonType"
 			@click="handleClick">
 			<template #icon>
-				<Video title=""
-					:size="20"
-					decorative />
+				<Video :size="20" />
 			</template>
 			{{ startCallLabel }}
 		</Button>
@@ -46,36 +44,26 @@
 			:disabled="loading"
 			@click="leaveCall(false)">
 			<template #icon>
-				<VideoOff title=""
-					:size="20"
-					decorative />
+				<VideoOff :size="20" />
 			</template>
 			{{ leaveCallLabel }}
 		</Button>
 		<Actions v-else-if="showLeaveCallButton && canEndForAll"
 			:disabled="loading">
 			<template #icon>
-				<VideoOff :size="16"
-					title=""
-					decorative />
+				<VideoOff :size="16" />
 				<span class="label">{{ leaveCallLabel }}</span>
-				<MenuDown :size="16"
-					title=""
-					decorative />
+				<MenuDown :size="16" />
 			</template>
 			<ActionButton @click="leaveCall(false)">
 				<template #icon>
-					<VideoOff title=""
-						:size="20"
-						decorative />
+					<VideoOff :size="20" />
 				</template>
 				{{ leaveCallLabel }}
 			</ActionButton>
 			<ActionButton @click="leaveCall(true)">
 				<template #icon>
-					<VideoOff title=""
-						:size="20"
-						decorative />
+					<VideoOff :size="20" />
 				</template>
 				{{ t('spreed', 'End meeting for all') }}
 			</ActionButton>
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 676312a1a68..dbd69e630a0 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -77,9 +77,7 @@
 				@shortkey.native="toggleFullscreen">
 				<span slot="icon"
 					:class="{'top-bar__button__force-white': isInCall}">
-					<Cog :size="20"
-						decorative
-						title="" />
+					<Cog :size="20" />
 				</span>
 				<ActionButton :icon="iconFullscreen"
 					:aria-label="t('spreed', 'Toggle fullscreen')"
@@ -91,9 +89,7 @@
 				<ActionLink v-if="isFileConversation"
 					:href="linkToFile">
 					<File slot="icon"
-						:size="20"
-						title=""
-						decorative />
+						:size="20" />
 					{{ t('spreed', 'Go to file') }}
 				</ActionLink>
 				<template v-if="showModerationOptions">
@@ -114,9 +110,7 @@
 					<ActionButton :close-after-click="true"
 						@click="forceMuteOthers">
 						<MicrophoneOff slot="icon"
-							:size="20"
-							decorative
-							title="" />
+							:size="20" />
 						{{ t('spreed', 'Mute others') }}
 					</ActionButton>
 				</template>
@@ -124,9 +118,7 @@
 				<ActionButton :close-after-click="true"
 					@click="openConversationSettings">
 					<template #icon>
-						<Cog :size="20"
-							decorative
-							title="" />
+						<Cog :size="20" />
 					</template>
 					{{ t('spreed', 'Conversation settings') }}
 				</ActionButton>
@@ -140,17 +132,13 @@
 					@click="openSidebar">
 					<MessageText slot="icon"
 						:size="20"
-						title=""
-						fill-color="#ffffff"
-						decorative />
+						fill-color="#ffffff" />
 				</ActionButton>
 				<ActionButton v-else
 					key="openSideBarButtonMenuPeople"
 					@click="openSidebar">
 					<MenuPeople slot="icon"
-						:size="20"
-						title=""
-						decorative />
+						:size="20" />
 				</ActionButton>
 			</Actions>
 		</div>
diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
index 5601f90d9ac..22000fcb7ca 100644
--- a/src/components/UploadEditor.vue
+++ b/src/components/UploadEditor.vue
@@ -50,9 +50,7 @@
 							class="add-more__button"
 							@click="clickImportInput">
 							<template #icon>
-								<Plus decorative
-									title=""
-									:size="48" />
+								<Plus :size="48" />
 							</template>
 						</Button>
 					</div>