diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index cd537f412e..5236867a53 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -24,34 +24,34 @@ Using `v-show` directly will result in usability issues due to internal focus tr
 		subname="last edited 3 weeks ago">
 		<NcAppSidebarTab name="Search" id="search-tab">
 			<template #icon>
-				<Magnify :size="20" />
+				<IconMagnify :size="20" />
 			</template>
 			Search tab content
 		</NcAppSidebarTab>
 		<NcAppSidebarTab name="Settings" id="settings-tab">
 			<template #icon>
-				<Cog :size="20" />
+				<IconCogOutline :size="20" />
 			</template>
 			Settings tab content
 		</NcAppSidebarTab>
 		<NcAppSidebarTab name="Sharing" id="share-tab">
 			<template #icon>
-				<ShareVariant :size="20" />
+				<IconShareVariantOutline :size="20" />
 			</template>
 			Sharing tab content
 		</NcAppSidebarTab>
 	</NcAppSidebar>
 </template>
 <script>
-	import Magnify from 'vue-material-design-icons/Magnify.vue'
-	import Cog from 'vue-material-design-icons/Cog.vue'
-	import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
+	import IconMagnify from 'vue-material-design-icons/Magnify.vue'
+	import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
+	import IconShareVariantOutline from 'vue-material-design-icons/ShareVariantOutline.vue'
 
 	export default {
 		components: {
-			Magnify,
-			Cog,
-			ShareVariant,
+			IconMagnify,
+			IconCogOutline,
+			IconShareVariantOutline,
 		},
 		data() {
 			return {
@@ -76,7 +76,7 @@ Single tab is rendered without navigation.
 			subname="last edited 3 weeks ago">
 			<NcAppSidebarTab name="Settings" id="settings-tab">
 				<template #icon>
-					<Cog :size="20" />
+					<IconCogOutline :size="20" />
 				</template>
 				Single tab content
 			</NcAppSidebarTab>
@@ -84,11 +84,11 @@ Single tab is rendered without navigation.
 	</div>
 </template>
 <script>
-import Cog from 'vue-material-design-icons/Cog.vue'
+import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
 
 export default {
 	components: {
-		Cog,
+		IconCogOutline,
 	},
 	data() {
 		return {
@@ -112,19 +112,19 @@ export default {
 			subname="last edited 3 weeks ago">
 			<NcAppSidebarTab v-if="showTabs[0]" name="Search" id="search-tab">
 				<template #icon>
-					<Magnify :size="20" />
+					<IconMagnify :size="20" />
 				</template>
 				Search tab content
 			</NcAppSidebarTab>
 			<NcAppSidebarTab v-if="showTabs[1]" name="Settings" id="settings-tab">
 				<template #icon>
-					<Cog :size="20" />
+					<IconCogOutline :size="20" />
 				</template>
 				Settings
 			</NcAppSidebarTab>
 			<NcAppSidebarTab v-if="showTabs[2]" name="Sharing" id="share-tab">
 				<template #icon>
-					<ShareVariant :size="20" />
+					<IconShareVariantOutline :size="20" />
 				</template>
 				Sharing tab content
 			</NcAppSidebarTab>
@@ -132,15 +132,15 @@ export default {
 	</div>
 </template>
 <script>
-import Magnify from 'vue-material-design-icons/Magnify.vue'
-import Cog from 'vue-material-design-icons/Cog.vue'
-import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
+import IconMagnify from 'vue-material-design-icons/Magnify.vue'
+import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
+import IconShareVariantOutline from 'vue-material-design-icons/ShareVariantOutline.vue'
 
 export default {
 	components: {
-		Magnify,
-		Cog,
-		ShareVariant,
+		IconMagnify,
+		IconCogOutline,
+		IconShareVariantOutline,
 	},
 	data() {
 		return {
@@ -160,34 +160,34 @@ export default {
 		subname="last edited 3 weeks ago">
 		<NcAppSidebarTab name="Search" id="search-tab" :order="3">
 			<template #icon>
-				<Magnify :size="20" />
+				<IconMagnify :size="20" />
 			</template>
 			Search tab content
 		</NcAppSidebarTab>
 		<NcAppSidebarTab name="Settings" id="settings-tab" :order="2">
 			<template #icon>
-				<Cog :size="20" />
+				<IconCogOutline :size="20" />
 			</template>
 			Settings tab content
 		</NcAppSidebarTab>
 		<NcAppSidebarTab name="Sharing" id="share-tab" :order="1">
 			<template #icon>
-				<ShareVariant :size="20" />
+				<IconShareVariantOutline :size="20" />
 			</template>
 			Sharing tab content
 		</NcAppSidebarTab>
 	</NcAppSidebar>
 </template>
 <script>
-import Magnify from 'vue-material-design-icons/Magnify.vue'
-import Cog from 'vue-material-design-icons/Cog.vue'
-import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
+import IconMagnify from 'vue-material-design-icons/Magnify.vue'
+import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
+import IconShareVariantOutline from 'vue-material-design-icons/ShareVariantOutline.vue'
 
 export default {
 	components: {
-		Magnify,
-		Cog,
-		ShareVariant,
+		IconMagnify,
+		IconCogOutline,
+		IconShareVariantOutline,
 	},
 }
 </script>
@@ -205,19 +205,19 @@ export default {
 			:active.sync="active">
 			<NcAppSidebarTab name="Search" id="search-tab">
 				<template #icon>
-					<Magnify :size="20" />
+					<IconMagnify :size="20" />
 				</template>
 				Search tab content
 			</NcAppSidebarTab>
 			<NcAppSidebarTab name="Settings" id="settings-tab">
 				<template #icon>
-					<Cog :size="20" />
+					<IconCogOutline :size="20" />
 				</template>
 				Settings
 			</NcAppSidebarTab>
 			<NcAppSidebarTab name="Sharing" id="share-tab">
 				<template #icon>
-					<ShareVariant :size="20" />
+					<IconShareVariantOutline :size="20" />
 				</template>
 				Sharing tab content
 			</NcAppSidebarTab>
@@ -225,15 +225,15 @@ export default {
 	</div>
 </template>
 <script>
-import Magnify from 'vue-material-design-icons/Magnify.vue'
-import Cog from 'vue-material-design-icons/Cog.vue'
-import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
+import IconMagnify from 'vue-material-design-icons/Magnify.vue'
+import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
+import IconShareVariantOutline from 'vue-material-design-icons/ShareVariantOutline.vue'
 
 export default {
 	components: {
-		Magnify,
-		Cog,
-		ShareVariant,
+		IconMagnify,
+		IconCogOutline,
+		IconShareVariantOutline,
 	},
 	data() {
 		return {
@@ -345,17 +345,17 @@ A working alternative would be using an icon together with an `aria-label`:
 			:empty="true">
 			<NcEmptyContent name="Content not found.">
 				<template #icon>
-					<Magnify :size="20" />
+					<IconMagnify :size="20" />
 				</template>
 			</NcEmptyContent>
 		</NcAppSidebar>
 	</template>
 	<script>
-	import Magnify from 'vue-material-design-icons/Magnify.vue'
+	import IconMagnify from 'vue-material-design-icons/Magnify.vue'
 
 	export default {
 		components: {
-			Magnify,
+			IconMagnify,
 		},
 	}
 	</script>
@@ -389,7 +389,7 @@ Note: the built-in toggle button is only available then NcAppSidebar is used in
 			subname="last edited 3 weeks ago">
 			<NcAppSidebarTab name="Settings" id="settings-tab">
 				<template #icon>
-					<Cog :size="20" />
+					<IconCogOutline :size="20" />
 				</template>
 				Single tab content
 			</NcAppSidebarTab>
@@ -398,11 +398,11 @@ Note: the built-in toggle button is only available then NcAppSidebar is used in
 </template>
 
 <script>
-import Cog from 'vue-material-design-icons/Cog.vue'
+import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
 
 export default {
 	components: {
-		Cog,
+		IconCogOutline,
 	},
 	data() {
 		return {
@@ -470,7 +470,7 @@ If the sidebar should be shown conditionally without any explicit toggle button,
 			@close="showSidebar = false">
 			<NcAppSidebarTab name="Settings" id="settings-tab">
 				<template #icon>
-					<Cog :size="20" />
+					<IconCogOutline :size="20" />
 				</template>
 				Single tab content
 			</NcAppSidebarTab>
@@ -479,11 +479,11 @@ If the sidebar should be shown conditionally without any explicit toggle button,
 </template>
 
 <script>
-import Cog from 'vue-material-design-icons/Cog.vue'
+import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
 
 export default {
 	components: {
-		Cog,
+		IconCogOutline,
 	},
 	data() {
 		return {
diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
index 1cd33e4d99..ef0d1be943 100644
--- a/src/components/NcAvatar/NcAvatar.vue
+++ b/src/components/NcAvatar/NcAvatar.vue
@@ -23,16 +23,16 @@
 <template>
 	<NcAvatar>
 		<template #icon>
-			<AccountMultiple :size="20" />
+			<IconAccountMultipleOutline :size="20" />
 		</template>
 	</NcAvatar>
 </template>
 <script>
-import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+import IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'
 
 export default {
 	components: {
-		AccountMultiple,
+		IconAccountMultipleOutline,
 	},
 }
 </script>
diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
index e02eaed98a..39f8d8d8c8 100644
--- a/src/components/NcButton/NcButton.vue
+++ b/src/components/NcButton/NcButton.vue
@@ -39,7 +39,7 @@ It can be used with one or multiple actions.
 			:size="size"
 			variant="tertiary-no-background">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
-				<Video
+				<IconVideoOutline
 					:size="20" />
 			</template>
 			<template v-if="style.indexOf('text') !== -1">Example text</template>
@@ -50,7 +50,7 @@ It can be used with one or multiple actions.
 			:size="size"
 			variant="tertiary">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
-				<Video
+				<IconVideoOutline
 					:size="20" />
 			</template>
 			<template v-if="style.indexOf('text') !== -1">Example text</template>
@@ -60,7 +60,7 @@ It can be used with one or multiple actions.
 			:disabled="disabled"
 			:size="size">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
-				<Video
+				<IconVideoOutline
 					:size="20" />
 			</template>
 			<template v-if="style.indexOf('text') !== -1">Example text</template>
@@ -71,7 +71,7 @@ It can be used with one or multiple actions.
 			:size="size"
 			variant="primary">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
-				<Video
+				<IconVideo
 					:size="20" />
 			</template>
 			<template v-if="style.indexOf('text') !== -1">Example text</template>
@@ -86,7 +86,7 @@ It can be used with one or multiple actions.
 		:wide="true"
 		text="Example text">
 		<template #icon>
-			<Video
+			<IconVideoOutline
 				:size="20" />
 		</template>
 		Example text
@@ -104,7 +104,7 @@ It can be used with one or multiple actions.
 			:size="size"
 			variant="success">
 			<template #icon>
-				<Video
+				<IconVideoOutline
 					:size="20" />
 			</template>
 			Example text
@@ -114,7 +114,7 @@ It can be used with one or multiple actions.
 			:size="size"
 			variant="warning">
 			<template #icon>
-				<Video
+				<IconVideoOutline
 					:size="20" />
 			</template>
 			Example text
@@ -124,7 +124,7 @@ It can be used with one or multiple actions.
 			:size="size"
 			variant="error">
 			<template #icon>
-				<Video
+				<IconVideoOutline
 					:size="20" />
 			</template>
 			Example text
@@ -135,11 +135,13 @@ It can be used with one or multiple actions.
 
 </template>
 <script>
-import Video from 'vue-material-design-icons/Video.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue'
+import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 
 export default {
 	components: {
-		Video,
+		IconVideo,
+		IconVideoOutline,
 	},
 	data() {
 		return {
diff --git a/src/components/NcChip/NcChip.vue b/src/components/NcChip/NcChip.vue
index 773133dbdb..b0571b8820 100644
--- a/src/components/NcChip/NcChip.vue
+++ b/src/components/NcChip/NcChip.vue
@@ -9,26 +9,26 @@
 <template>
 	<div style="display: flex; gap: 8px; flex-wrap: wrap;">
 		<NcChip text="Notes.txt" />
-		<NcChip text="Files" :icon-path="mdiFile" />
-		<NcChip text="Color" :icon-path="mdiPalette" variant="tertiary" />
+		<NcChip text="Files" :icon-path="mdiFileOutline" />
+		<NcChip text="Color" :icon-path="mdiPaletteOutline" variant="tertiary" />
 		<NcChip text="Current time" :icon-path="mdiClock" no-close variant="primary" />
 		<NcChip text="Canceled" :icon-path="mdiCancel" variant="error" no-close />
-		<NcChip text="Open" :icon-path="mdiCircle" variant="success" no-close />
+		<NcChip text="Open" :icon-path="mdiCircleOutline" variant="success" no-close />
 		<NcChip text="Due tomorrow" :icon-path="mdiAlertCircleOutline" variant="warning" no-close />
 	</div>
 </template>
 <script>
-import { mdiClock, mdiFile, mdiPalette, mdiCancel, mdiCircle, mdiAlertCircleOutline } from '@mdi/js'
+import { mdiClock, mdiFileOutline, mdiPaletteOutline, mdiCancel, mdiCircleOutline, mdiAlertCircleOutline } from '@mdi/js'
 
 export default {
 	setup() {
 		return {
 			mdiAlertCircleOutline,
 			mdiCancel,
-			mdiCircle,
+			mdiCircleOutline,
 			mdiClock,
-			mdiFile,
-			mdiPalette,
+			mdiFileOutline,
+			mdiPaletteOutline,
 		}
 	}
 }
diff --git a/src/components/NcDashboardWidget/NcDashboardWidget.vue b/src/components/NcDashboardWidget/NcDashboardWidget.vue
index 0eca76f088..bc5819a315 100644
--- a/src/components/NcDashboardWidget/NcDashboardWidget.vue
+++ b/src/components/NcDashboardWidget/NcDashboardWidget.vue
@@ -94,8 +94,8 @@ export default {
 const myItems = [
 	{
 		id: '1',
-		targetUrl: 'https://target.org',
-		avatarUrl: 'https://avatar.url/img.png',
+		targetUrl: 'https://example.tld',
+		avatarUrl: 'https://example.tld/img.png',
 		avatarUsername: 'Robert',
 		avatarIsNoUser: true,
 		overlayIconUrl: '/svg/core/actions/sound?color=000',
@@ -104,8 +104,8 @@ const myItems = [
 	},
 	{
 		id: '2',
-		targetUrl: 'https://other-target.org',
-		avatarUrl: 'https://other-avatar.url/img.png',
+		targetUrl: 'https://example.tld',
+		avatarUrl: 'https://example.tld/img.jpg',
 		overlayIconUrl: '/svg/core/actions/add?color=000',
 		mainText: 'Second item text',
 		subText: 'Second item subtext',
diff --git a/src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue b/src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue
index 4d4fd321c6..5ae56c7e03 100644
--- a/src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue
+++ b/src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue
@@ -30,12 +30,12 @@ Render raw SVG string icons.
 		</NcButton>
 		<NcButton aria-label="Send">
 			<template #icon>
-				<NcIconSvgWrapper :path="mdiSend" name="Send" />
+				<NcIconSvgWrapper :path="mdiSendOutline" name="Send" />
 			</template>
 		</NcButton>
 		<NcButton aria-label="Star">
 			<template #icon>
-				<NcIconSvgWrapper :path="mdiStar" name="Star" />
+				<NcIconSvgWrapper :path="mdiStarOutline" name="Star" />
 			</template>
 		</NcButton>
 	</div>
@@ -43,20 +43,20 @@ Render raw SVG string icons.
 
 <script>
 import closeSvg from '@mdi/svg/svg/close.svg?raw'
-import cogSvg from '@mdi/svg/svg/cog.svg?raw'
+import cogSvg from '@mdi/svg/svg/cog-outline.svg?raw'
 import plusSvg from '@mdi/svg/svg/plus.svg?raw'
-import { mdiSend } from '@mdi/js'
-import { mdiStar } from '@mdi/js'
+import { mdiSendOutline } from '@mdi/js'
+import { mdiStarOutline } from '@mdi/js'
 
 export default {
 	setup() {
-		// This icons are static data, so you do not need to put them into `data` which will make them reactive
+		// These icons are static data, so you do not need to put them into `data` which will make them reactive
 		return {
 			closeSvg,
 			cogSvg,
 			plusSvg,
-			mdiSend,
-			mdiStar,
+			mdiSendOutline,
+			mdiStarOutline,
 		}
 	},
 }
@@ -76,16 +76,16 @@ export default {
 ```vue
 <template>
 	<p>
-		This is my <NcIconSvgWrapper inline :path="mdiStar" /> Favorite
+		This is my <NcIconSvgWrapper inline :path="mdiStarOutline" /> Favorite
 	</p>
 </template>
 <script>
-import { mdiStar } from '@mdi/js'
+import { mdiStarOutline } from '@mdi/js'
 
 export default {
 	setup() {
 		return {
-			mdiStar,
+			mdiStarOutline,
 		}
 	},
 }
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index f7a55abb59..3e2cb306b6 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -24,7 +24,7 @@
 			</template>
 			<template #indicator>
 				<!-- Color dot -->
-				<CheckboxBlankCircle :size="16" fill-color="#fff" />
+				<CheckboxBlankCircleOutline :size="16" fill-color="#fff" />
 			</template>
 			<template #actions>
 				<NcActionButton>
@@ -314,17 +314,17 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 			<template #extra-actions>
 				<NcButton variant="tertiary">
 					<template #icon>
-						<IconPencil :size="20" />
+						<IconPencilOutline :size="20" />
 					</template>
 				</NcButton>
 				<NcButton variant="tertiary">
 					<template #icon>
-						<IconCog :size="20" />
+						<IconCogOutline :size="20" />
 					</template>
 				</NcButton>
 			</template>
 			<template #actions-icon>
-				<IconNoteText :size="20" />
+				<IconNoteTextOutline :size="20" />
 			</template>
 			<template #actions>
 				<NcActionButton>
@@ -342,14 +342,20 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 </template>
 <script>
 	import IconCog from 'vue-material-design-icons/Cog.vue'
+	import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
 	import IconNoteText from 'vue-material-design-icons/NoteText.vue'
+	import IconNoteTextOutline from 'vue-material-design-icons/NoteTextOutline.vue'
 	import IconPencil from 'vue-material-design-icons/Pencil.vue'
+	import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 	export default {
 		components: {
 			IconCog,
+			IconCogOutline,
 			IconNoteText,
+			IconNoteTextOutline,
 			IconPencil,
+			IconPencilOutline,
 		},
 	}
 </script>
@@ -368,14 +374,14 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 		<NcListItem compact
 			name="Name of the element">
 			<template #icon>
-				<IconNoteText :size="20" />
+				<IconNoteTextOutline :size="20" />
 			</template>
 		</NcListItem>
 		<NcListItem compact
 			name="Name of the element"
 			:counter-number="1">
 			<template #icon>
-				<IconNoteText :size="20" />
+				<IconNoteTextOutline :size="20" />
 			</template>
 			<template #subname>
 				This one is with subname
@@ -393,7 +399,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 			name="Name of the element"
 			:counter-number="3">
 			<template #icon>
-				<IconNoteText :size="20" />
+				<IconNoteTextOutline :size="20" />
 			</template>
 			<template #subname>
 				This one is with subname
@@ -412,7 +418,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 			:counter-number="4"
 			href="https://nextcloud.com">
 			<template #icon>
-				<IconNoteText :size="20" />
+				<IconNoteTextOutline :size="20" />
 			</template>
 			<template #subname>
 				This one is with an external link
@@ -422,10 +428,12 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 </template>
 <script>
 	import IconNoteText from 'vue-material-design-icons/NoteText.vue'
+	import IconNoteTextOutline from 'vue-material-design-icons/NoteTextOutline.vue'
 
 	export default {
 		components: {
 			IconNoteText,
+			IconNoteTextOutline,
 		},
 	}
 </script>
diff --git a/src/components/NcListItemIcon/NcListItemIcon.vue b/src/components/NcListItemIcon/NcListItemIcon.vue
index 4a4e092766..ec8cfe2d39 100644
--- a/src/components/NcListItemIcon/NcListItemIcon.vue
+++ b/src/components/NcListItemIcon/NcListItemIcon.vue
@@ -17,16 +17,16 @@ It might be used for list rendering or within the multiselect for example
 	<template>
 		<NcListItemIcon name="User 1" :avatar-size="44">
 			<template>
-				<Account :size="20" />
+				<IconAccountOutline :size="20" />
 			</template>
 		</NcListItemIcon>
 	</template>
 	<script>
-	import Account from 'vue-material-design-icons/Account.vue'
+	import IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'
 
 	export default {
 		components: {
-			Account,
+			IconAccountOutline,
 		},
 	}
 	</script>
@@ -37,16 +37,16 @@ It might be used for list rendering or within the multiselect for example
 	<template>
 		<NcListItemIcon name="Group 1" subname="13 members" :is-no-user="true">
 			<template>
-				<AccountMultiple :size="20" />
+				<IconAccountMultipleOutline :size="20" />
 			</template>
 		</NcListItemIcon>
 	</template>
 	<script>
-	import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+	import IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'
 
 	export default {
 		components: {
-			AccountMultiple,
+			IconAccountMultipleOutline,
 		},
 	}
 	</script>
@@ -59,16 +59,16 @@ It might be used for list rendering or within the multiselect for example
 		<NcListItemIcon name="Testing admin" subname="testme@example.com" search="test" />
 		<NcListItemIcon name="Test group 2" subname="loremipsum@domain.com" :is-no-user="true" search="test">
 			<template>
-				<AccountMultiple :size="20" />
+				<IconAccountMultipleOutline :size="20" />
 			</template>
 		</NcListItemIcon>
 	</template>
 	<script>
-	import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+	import IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'
 
 	export default {
 		components: {
-			AccountMultiple,
+			IconAccountMultipleOutline,
 		},
 	}
 	</script>
@@ -81,13 +81,13 @@ It might be used for list rendering or within the multiselect for example
 			<NcActions>
 				<NcActionButton @click="alert('Edit')">
 					<template #icon>
-						<Pencil :size="20" />
+						<IconPencilOutline :size="20" />
 					</template>
 					Edit
 				</NcActionButton>
 				<NcActionButton @click="alert('Delete')">
 					<template #icon>
-						<Delete :size="20" />
+						<IconDeleteOutline :size="20" />
 					</template>
 					Delete
 				</NcActionButton>
@@ -95,13 +95,13 @@ It might be used for list rendering or within the multiselect for example
 		</NcListItemIcon>
 	</template>
 	<script>
-	import Delete from 'vue-material-design-icons/Delete.vue'
-	import Pencil from 'vue-material-design-icons/Pencil.vue'
+	import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+	import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 	export default {
 		components: {
-			Delete,
-			Pencil,
+			IconDeleteOutline,
+			IconPencilOutline,
 		},
 	}
 	</script>
diff --git a/src/components/NcNoteCard/NcNoteCard.vue b/src/components/NcNoteCard/NcNoteCard.vue
index 24f1f32ba9..1592aa40ef 100644
--- a/src/components/NcNoteCard/NcNoteCard.vue
+++ b/src/components/NcNoteCard/NcNoteCard.vue
@@ -34,7 +34,7 @@ available in four versions:
 		<h4>Custom icon</h4>
 		<NcNoteCard type="warning" text="Custom icon usage">
 			<template #icon>
-				<Cog :size="20"/>
+				<IconCogOutline :size="20"/>
 			</template>
 		</NcNoteCard>
 
@@ -46,11 +46,11 @@ available in four versions:
 </template>
 
 <script>
-	import Cog from 'vue-material-design-icons/Cog.vue'
+	import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
 
 	export default {
 		components: {
-			Cog,
+			IconCogOutline,
 		},
 	}
 </script>
diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
index 1ef6fe1096..ed57bae98d 100644
--- a/src/components/NcTextField/NcTextField.vue
+++ b/src/components/NcTextField/NcTextField.vue
@@ -34,7 +34,7 @@ and `minlength`.
 			:show-trailing-button="text4 !== ''"
 			@trailing-button-click="clearText">
 			<template #icon>
-				<Lock :size="20" />
+				<IconLockOutline :size="20" />
 			</template>
 		</NcTextField>
 		<NcTextField v-model="text2"
@@ -73,7 +73,7 @@ and `minlength`.
 </template>
 <script>
 import Magnify from 'vue-material-design-icons/Magnify'
-import Lock from 'vue-material-design-icons/Lock'
+import IconLockOutline from 'vue-material-design-icons/LockOutline'
 import Close from 'vue-material-design-icons/Close'
 
 export default {
@@ -89,7 +89,7 @@ export default {
 
 	components: {
 		Magnify,
-		Lock,
+		IconLockOutline,
 		Close,
 	},