Add material design icons

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

package-lock.json

@@ -2520,11 +2520,6 @@
 				}
 			}
 		},
-		"@mdi/font": {
-			"version": "5.1.45",
-			"resolved": "https://registry.npmjs.org/@mdi/font/-/font-5.1.45.tgz",
-			"integrity": "sha512-7H1UMwUpEp8mthdPlpAi7bhEyvTbvtK1TlA89scc0cXMpQy0UFygdkaf+6fveIxpBcRNgw0gnGSEonlsfYocXg=="
-		},
 		"@mrmlnc/readdir-enhanced": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -20920,6 +20915,11 @@
 				"vue-style-loader": "^4.1.0"
 			}
 		},
+		"vue-material-design-icons": {
+			"version": "4.6.0",
+			"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.6.0.tgz",
+			"integrity": "sha512-b0Js/C4WHFnpcuH8goxl0bM7mjuSNClAYvsijUwfMfWXjW663ZvcQj3Int5H9rgRwZjPXPTJVxbFn+4sWJKMVA=="
+		},
 		"vue-multiselect": {
 			"version": "2.1.6",
 			"resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.6.tgz",

package.json

@@ -17,7 +17,6 @@
 	},
 	"dependencies": {
 		"@juliushaertl/vue-richtext": "^0.3.1",
-		"@mdi/font": "^5.1.45",
 		"@nextcloud/auth": "^1.2.3",
 		"@nextcloud/axios": "^1.3.2",
 		"@nextcloud/dialogs": "^1.3.0",
@@ -44,6 +43,7 @@
 		"vue-browser-detect-plugin": "^0.1.8",
 		"vue-clipboard2": "^0.3.1",
 		"vue-fragment": "^1.5.1",
+		"vue-material-design-icons": "^4.6.0",
 		"vue-observe-visibility": "^0.4.6",
 		"vue-prevent-unload": "^0.2.3",
 		"vue-router": "^3.1.6",

src/components/CallView/shared/Video.vue

@@ -48,6 +48,9 @@
 					class="avatar guest">
 					{{ firstLetterOfGuestName }}
 				</div>
+				<div v-if="isSelected">
+					<Crown fill-color="#FFFFFF" :size="48" />
+				</div>
 			</div>
 		</transition>
 
@@ -98,6 +101,7 @@ import SHA1 from 'crypto-js/sha1'
 import Hex from 'crypto-js/enc-hex'
 import video from './video.js'
 import VideoBackground from './VideoBackground'
+import Crown from 'vue-material-design-icons/Crown'
 
 export default {
 
@@ -106,6 +110,7 @@ export default {
 	components: {
 		Avatar,
 		VideoBackground,
+		Crown,
 	},
 
 	directives: {

src/components/TopBar/TopBar.vue

@@ -24,8 +24,7 @@
 		<button v-if="hasSelectedVideo && !isGrid"
 			class="top-bar__button primary"
 			@click="handlefollowSpeaker">
-			<span
-				class="mdi mdi-voice" />
+			<AccountVoice :size="16" color="ffffff" />
 			{{ followSpeakerLabel }}
 		</button>
 		<CallButton class="top-bar__button" />
@@ -165,6 +164,7 @@ import {
 	setConversationPassword,
 } from '../../services/conversationsService'
 import { generateUrl } from '@nextcloud/router'
+import AccountVoice from 'vue-material-design-icons/AccountVoice'
 
 export default {
 	name: 'TopBar',
@@ -178,6 +178,7 @@ export default {
 		CallButton,
 		Popover,
 		ActionSeparator,
+		AccountVoice,
 	},
 
 	props: {
@@ -509,6 +510,8 @@ export default {
 	&__button {
 		margin: 0 2px;
 		align-self: center;
+		display: flex;
+		align-items: center;
 	}
 
 }

webpack.common.js

@@ -37,7 +37,6 @@ module.exports = {
 			{
 				test: /\.vue$/,
 				loader: 'vue-loader',
-				exclude: /node_modules/,
 			},
 			{
 				test: /\.js$/,