Since v5.0.0 of the lib, the property decorative has been removed.bugfix/noid/html-validation-vue-material-design-icons

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>

25 files changed, 91 insertions, 283 deletions

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 41e24cbed..c4504ec51 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 a006f5155..4ad0e2206 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 6f60f5b45..73f24decd 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 0dc05a2db..24c18e87b 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 32d6ae993..cbee8980c 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 45afadbe7..252fd8d5e 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 3ca0cca16..94b681bcc 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 d3d8cbfec..fc6932361 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 8c7bdb446..ecae3d5ce 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 3865fa290..30f55a41d 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 e637402a8..3fe5f4271 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 5aa726c2c..7b7a9490d 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 a5c87774a..8d6d6b6e1 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 cc8b713ff..383bf3c6a 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 43fa1c80f..01977880d 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 2dc8d3164..9b27799b2 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 a0e1d366b..25e290a7f 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 d5b166989..3fc7ea85a 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 7763ff0cc..3215a72e5 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 f671d2c36..1ad91113d 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 67f5683c2..6a35e6379 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 4fa301c8e..2f1c8f60f 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 6538e5a12..754e3a962 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 676312a1a..dbd69e630 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 5601f90d9..22000fcb7 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>