Fix vue material design icons HTML validation

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>

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,16 +159,13 @@
 				:aria-label="t('spreed', 'More actions')">
 				<DotsHorizontal slot="icon"
 					:size="20"
-					decorative
 					fill-color="#ffffff" />
 
 				<ActionButton :close-after-click="true"
 					@click="toggleHandRaised">
 					<!-- 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>

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>

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,48 +52,36 @@
 						@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"
 						class="hideRemoteVideo"
 						@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')"
 						class="screensharingIndicator"
 						: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>

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>

src/components/Description/Description.vue

@@ -39,19 +39,15 @@
 					:aria-label="t('spreed', 'Cancel editing description')"
 					@click="handleCancelEditing">
 					<template #icon>
-						<Close decorative
-							title=""
-							:size="20" />
+						<Close :size="20" />
 					</template>
 				</Button>
 				<Button type="primary"
 					:aria-label="t('spreed', 'Submit conversation description')"
 					: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>

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>