1 files changed, 26 insertions, 19 deletions
diff --git a/core/src/views/ContactsMenu.vue b/core/src/views/ContactsMenu.vue
index 51eea0a0fb1..924ddcea56b 100644
--- a/core/src/views/ContactsMenu.vue
+++ b/core/src/views/ContactsMenu.vue
@@ -9,25 +9,25 @@
 		:aria-label="t('core', 'Search contacts')"
 		@open="handleOpen">
 		<template #trigger>
-			<Contacts class="contactsmenu__trigger-icon" :size="20" />
+			<NcIconSvgWrapper class="contactsmenu__trigger-icon" :path="mdiContacts" />
 		</template>
 		<div class="contactsmenu__menu">
 			<div class="contactsmenu__menu__input-wrapper">
-				<NcTextField :value.sync="searchTerm"
-					trailing-button-icon="close"
+				<NcTextField id="contactsmenu__menu__search"
 					ref="contactsMenuInput"
+					:value.sync="searchTerm"
+					trailing-button-icon="close"
 					:label="t('core', 'Search contacts')"
 					:trailing-button-label="t('core','Reset search')"
 					:show-trailing-button="searchTerm !== ''"
 					:placeholder="t('core', 'Search contacts …')"
-					id="contactsmenu__menu__search"
 					class="contactsmenu__menu__search"
 					@input="onInputDebounced"
 					@trailing-button-click="onReset" />
 			</div>
 			<NcEmptyContent v-if="error" :name="t('core', 'Could not load your contacts')">
 				<template #icon>
-					<Magnify />
+					<NcIconSvgWrapper :path="mdiMagnify" />
 				</template>
 			</NcEmptyContent>
 			<NcEmptyContent v-else-if="loadingText" :name="loadingText">
@@ -37,7 +37,7 @@
 			</NcEmptyContent>
 			<NcEmptyContent v-else-if="contacts.length === 0" :name="t('core', 'No contacts found')">
 				<template #icon>
-					<Magnify />
+					<NcIconSvgWrapper :path="mdiMagnify" />
 				</template>
 			</NcEmptyContent>
 			<div v-else class="contactsmenu__menu__content">
@@ -62,39 +62,46 @@
 </template>
 
 <script>
+import { mdiContacts, mdiMagnify } from '@mdi/js'
+import { generateUrl } from '@nextcloud/router'
+import { getCurrentUser } from '@nextcloud/auth'
+import { t } from '@nextcloud/l10n'
 import axios from '@nextcloud/axios'
-import Contacts from 'vue-material-design-icons/Contacts.vue'
 import debounce from 'debounce'
-import { getCurrentUser } from '@nextcloud/auth'
-import { generateUrl } from '@nextcloud/router'
-import Magnify from 'vue-material-design-icons/Magnify.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import NcHeaderMenu from '@nextcloud/vue/dist/Components/NcHeaderMenu.js'
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import { translate as t } from '@nextcloud/l10n'
+
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcHeaderMenu from '@nextcloud/vue/components/NcHeaderMenu'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 
 import Contact from '../components/ContactsMenu/Contact.vue'
 import logger from '../logger.js'
 import Nextcloud from '../mixins/Nextcloud.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 export default {
 	name: 'ContactsMenu',
 
 	components: {
 		Contact,
-		Contacts,
-		Magnify,
 		NcButton,
 		NcEmptyContent,
 		NcHeaderMenu,
+		NcIconSvgWrapper,
 		NcLoadingIcon,
 		NcTextField,
 	},
 
 	mixins: [Nextcloud],
 
+	setup() {
+		return {
+			mdiContacts,
+			mdiMagnify,
+		}
+	},
+
 	data() {
 		const user = getCurrentUser()
 		return {
@@ -185,7 +192,7 @@ export default {
 		label[for="contactsmenu__menu__search"] {
 			font-weight: bold;
 			font-size: 19px;
-			margin-left: 13px;
+			margin-inline-start: 13px;
 		}
 
 		&__input-wrapper {