diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index bb3b23a42d..48b75555ba 100644
--- a/src/components/NcActionButton/NcActionButton.vue
+++ b/src/components/NcActionButton/NcActionButton.vue
@@ -11,38 +11,38 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 		<NcActions>
 			<NcActionButton @click="showMessage('Delete')">
 				<template #icon>
-					<Delete :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Delete
 			</NcActionButton>
 			<NcActionButton :close-after-click="true" @click="showMessage('Delete and close menu')">
 				<template #icon>
-					<Delete :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Delete and close
 			</NcActionButton>
 			<NcActionButton :is-menu="true">
 				<template #icon>
-					<Plus :size="20" />
+					<IconPlus :size="20" />
 				</template>
 				Create
 			</NcActionButton>
 			<NcActionButton :disabled="true" @click="showMessage('Disabled')">
 				<template #icon>
-					<Delete :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Disabled button
 			</NcActionButton>
 		</NcActions>
 	</template>
 	<script>
-	import Delete from 'vue-material-design-icons/Delete.vue'
-	import Plus from 'vue-material-design-icons/Plus.vue'
+	import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+	import IconPlus from 'vue-material-design-icons/Plus.vue'
 
 	export default {
 		components: {
-			Delete,
-			Plus,
+			IconTrashCanOutline,
+			IconPlus,
 		},
 		methods: {
 			showMessage(msg) {
@@ -62,34 +62,34 @@ For the same purpose, but in a more compact way, `description` prop can be used.
 		<NcActions>
 			<NcActionButton @click="showMessage('Add')">
 				<template #icon>
-					<Plus :size="20" />
+					<IconPlus :size="20" />
 				</template>
 				Add new
 			</NcActionButton>
 			<NcActionButton name="Long button" @click="showMessage('Delete')">
 				<template #icon>
-					<Delete :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				This button is associated with a very long text.\nAnd with new lines too.
 			</NcActionButton>
 			<NcActionButton description="Subline description for the button" @click="showMessage('Edit')">
 				<template #icon>
-					<Pencil :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 				Edit
 			</NcActionButton>
 		</NcActions>
 	</template>
 	<script>
-	import Delete from 'vue-material-design-icons/Delete.vue'
-	import Pencil from 'vue-material-design-icons/Pencil.vue'
-	import Plus from 'vue-material-design-icons/Plus.vue'
+	import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+	import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+	import IconPlus from 'vue-material-design-icons/Plus.vue'
 
 	export default {
 		components: {
-			Delete,
-			Pencil,
-			Plus,
+			IconTrashCanOutline,
+			IconPencilOutline,
+			IconPlus,
 		},
 		methods: {
 			showMessage(msg) {
@@ -108,18 +108,18 @@ Action icon attribute with a single action
 		<NcActions>
 			<NcActionButton @click="showMessage('Add')">
 				<template #icon>
-					<Plus :size="20" />
+					<IconPlus :size="20" />
 				</template>
 				Add new
 			</NcActionButton>
 		</NcActions>
 	</template>
 	<script>
-	import Plus from 'vue-material-design-icons/Plus.vue'
+	import IconPlus from 'vue-material-design-icons/Plus.vue'
 
 	export default {
 		components: {
-			Plus,
+			IconPlus,
 		},
 		methods: {
 			showMessage(msg) {
@@ -138,26 +138,26 @@ You can also use a custom icon, for example from the vue-material-design-icons l
 	<NcActions>
 		<NcActionButton>
 			<template #icon>
-				<HandBackLeft :size="20" />
+				<IconHandBackLeftOutline :size="20" />
 			</template>
 			Raise left hand
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<HandBackRight :size="20" />
+				<IconHandBackRightOutline :size="20" />
 			</template>
 			Raise right hand
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
-import HandBackRight from 'vue-material-design-icons/HandBackRight.vue'
+import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
+import IconHandBackRightOutline from 'vue-material-design-icons/HandBackRightOutline.vue'
 
 export default {
 	components: {
-		HandBackLeft,
-		HandBackRight,
+		IconHandBackLeftOutline,
+		IconHandBackRightOutline,
 	},
 }
 </script>
@@ -173,18 +173,18 @@ For example to have the button act like a toggle button just set the `modelValue
 	<NcActions>
 		<NcActionButton :model-value.sync="fullscreen">
 			<template #icon>
-				<Fullscreen :size="20" />
+				<IconFullscreen :size="20" />
 			</template>
 			Fullscreen
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
+import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
 
 export default {
 	components: {
-		Fullscreen,
+		IconFullscreen,
 	},
 	data() {
 		return {
@@ -203,26 +203,26 @@ This also allows tri-state behavior (`true`, `false`, `null`) in which case `ari
 	<NcActions>
 		<NcActionButton :model-value.sync="handRaised" type="checkbox">
 			<template #icon>
-				<HandBackLeft :size="20" />
+				<IconHandBackLeftOutline :size="20" />
 			</template>
 			Raise hand
 		</NcActionButton>
 		<NcActionButton :model-value.sync="fullscreen" type="checkbox">
 			<template #icon>
-				<Fullscreen :size="20" />
+				<IconFullscreen :size="20" />
 			</template>
 			Fullscreen
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
-import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
+import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
+import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
 
 export default {
 	components: {
-		HandBackLeft,
-		Fullscreen,
+		IconHandBackLeftOutline,
+		IconFullscreen,
 	},
 	data() {
 		return {
@@ -248,32 +248,32 @@ Note: unlike native radio buttons, `NcActionButton` are not grouped by name, so
 		<NcActions>
 			<NcActionButton :model-value.sync="payment" type="radio" value="cash">
 				<template #icon>
-					<Cash :size="20" />
+					<IconCash :size="20" />
 				</template>
 				Pay with cash
 			</NcActionButton>
 			<NcActionButton :model-value.sync="payment" type="radio" value="card">
 				<template #icon>
-					<CreditCard :size="20" />
+					<IconCreditCardOutline :size="20" />
 				</template>
 				Pay by card
 			</NcActionButton>
 			<NcActionSeparator />
 			<NcActionButton type="radio" :model-value="align.isLeft" @update:modelValue="setAlign('Left', $event)">
 				<template #icon>
-					<FormatAlignLeft :size="20" />
+					<IconFormatAlignLeft :size="20" />
 				</template>
 				Left
 			</NcActionButton>
 			<NcActionButton type="radio" :model-value="align.isCenter" @update:modelValue="setAlign('Center', $event)">
 				<template #icon>
-					<FormatAlignCenter :size="20" />
+					<IconFormatAlignCenter :size="20" />
 				</template>
 				Center
 			</NcActionButton>
 			<NcActionButton type="radio" :model-value="align.isRight" @update:modelValue="setAlign('Right', $event)">
 				<template #icon>
-					<FormatAlignRight :size="20" />
+					<IconFormatAlignRight :size="20" />
 				</template>
 				Right
 			</NcActionButton>
@@ -285,19 +285,19 @@ Note: unlike native radio buttons, `NcActionButton` are not grouped by name, so
 	</div>
 </template>
 <script>
-import Cash from 'vue-material-design-icons/Cash.vue'
-import CreditCard from 'vue-material-design-icons/CreditCard.vue'
-import FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'
-import FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'
-import FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'
+import IconCash from 'vue-material-design-icons/Cash.vue'
+import IconCreditCardOutline from 'vue-material-design-icons/CreditCardOutline.vue'
+import IconFormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'
+import IconFormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'
+import IconFormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'
 
 export default {
 	components: {
-		Cash,
-		CreditCard,
-		FormatAlignLeft,
-		FormatAlignCenter,
-		FormatAlignRight,
+		IconCash,
+		IconCreditCardOutline,
+		IconFormatAlignLeft,
+		IconFormatAlignCenter,
+		IconFormatAlignRight,
 	},
 	data() {
 		return {
diff --git a/src/components/NcActionButtonGroup/NcActionButtonGroup.vue b/src/components/NcActionButtonGroup/NcActionButtonGroup.vue
index b3f5ee7b9c..9e5abc2c60 100644
--- a/src/components/NcActionButtonGroup/NcActionButtonGroup.vue
+++ b/src/components/NcActionButtonGroup/NcActionButtonGroup.vue
@@ -18,7 +18,7 @@ This should be used sparingly for accessibility.
 					type="radio"
 					value="l">
 					<template #icon>
-						<AlignLeft :size="20" />
+						<IconAlignHorizontalLeft :size="20" />
 					</template>
 				</NcActionButton>
 				<NcActionButton aria-label="Align center"
@@ -26,7 +26,7 @@ This should be used sparingly for accessibility.
 					type="radio"
 					value="c">
 					<template #icon>
-						<AlignCenter :size="20" />
+						<IconAlignHorizontalCenter :size="20" />
 					</template>
 				</NcActionButton>
 				<NcActionButton aria-label="Align right"
@@ -34,14 +34,14 @@ This should be used sparingly for accessibility.
 					type="radio"
 					value="r">
 					<template #icon>
-						<AlignRight :size="20" />
+						<IconAlignHorizontalRight :size="20" />
 					</template>
 				</NcActionButton>
 			</NcActionButtonGroup>
 			<NcActionButton :close-after-click="true"
 				@click="showMessage('Some other action')">
 				<template #icon>
-					<Plus :size="20" />
+					<IconPlus :size="20" />
 				</template>
 				Some other action
 			</NcActionButton>
@@ -49,17 +49,17 @@ This should be used sparingly for accessibility.
 	</div>
 </template>
 <script>
-import AlignLeft from 'vue-material-design-icons/AlignHorizontalLeft'
-import AlignRight from 'vue-material-design-icons/AlignHorizontalRight'
-import AlignCenter from 'vue-material-design-icons/AlignHorizontalCenter'
-import Plus from 'vue-material-design-icons/Plus'
+import IconAlignHorizontalLeft from 'vue-material-design-icons/AlignHorizontalLeft.vue'
+import IconAlignHorizontalRight from 'vue-material-design-icons/AlignHorizontalRight.vue'
+import IconAlignHorizontalCenter from 'vue-material-design-icons/AlignHorizontalCenter.vue'
+import IconPlus from 'vue-material-design-icons/Plus.vue'
 
 export default {
 	components: {
-		AlignLeft,
-		AlignRight,
-		AlignCenter,
-		Plus,
+		IconAlignHorizontalLeft,
+		IconAlignHorizontalRight,
+		IconAlignHorizontalCenter,
+		IconPlus,
 	},
 	data() {
 		return { alignment: 'l' }
diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
index 28760873d3..17cd6de0e3 100644
--- a/src/components/NcActionInput/NcActionInput.vue
+++ b/src/components/NcActionInput/NcActionInput.vue
@@ -16,58 +16,58 @@ For the `NcSelect` component, all events will be passed through. Please see the
 		<NcActions>
 			<NcActionInput v-model="text" :label-outside="true" label="Label outside the input">
 				<template #icon>
-					<Pencil :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 			</NcActionInput>
 			<NcActionInput v-model="text" :show-trailing-button="false" label="Input without trailing button">
 				<template #icon>
-					<Pencil :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 			</NcActionInput>
 			<NcActionInput v-model="text" label="Input with placeholder">
 				<template #icon>
-					<Pencil :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 				This is the placeholder
 			</NcActionInput>
 			<NcActionInput type="password" v-model="text" label="Password with visible label">
 				<template #icon>
-					<Key :size="20" />
+					<IconKeyOutline :size="20" />
 				</template>
 				Password placeholder
 			</NcActionInput>
 			<NcActionInput type="password" v-model="text" :show-trailing-button="false">
 				<template #icon>
-					<Key :size="20" />
+					<IconKeyOutline :size="20" />
 				</template>
 				Password placeholder
 			</NcActionInput>
 			<NcActionInput type="color" v-model="color" label="Favorite color">
 				<template #icon>
-					<Eyedropper :size="20" />
+					<IconEyedropper :size="20" />
 				</template>
 				Color placeholder
 			</NcActionInput>
 			<NcActionInput label="Visible label" v-model="text">
 				<template #icon>
-					<Pencil :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 				Input with visible label
 			</NcActionInput>
 			<NcActionInput :disabled="true" label="This is a disabled input">
 				<template #icon>
-					<Close :size="20" />
+					<IconClose :size="20" />
 				</template>
 			</NcActionInput>
 			<NcActionInput type="date" isNativePicker v-model="date">
 				<template #icon>
-					<Pencil :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 				Please pick a date
 			</NcActionInput>
 			<NcActionInput v-model="date" type="date">
 				<template #icon>
-					<Pencil :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 				Please pick a date
 			</NcActionInput>
@@ -77,7 +77,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
 				input-label="Fruit selection"
 				:options="['Apple', 'Banana', 'Cherry']">
 				<template #icon>
-					<Pencil :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 				Please pick a fruit
 			</NcActionInput>
@@ -90,24 +90,24 @@ For the `NcSelect` component, all events will be passed through. Please see the
 				:multiple="true"
 				:options="[{label:'Apple', id: 'apple'}, {label:'Banana', id: 'banana'}, {label:'Cherry', id: 'cherry'}]">
 				<template #icon>
-					<Pencil :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 				Please pick a fruit object
 			</NcActionInput>
 		</NcActions>
 	</template>
 	<script>
-	import Close from 'vue-material-design-icons/Close'
-	import Eyedropper from 'vue-material-design-icons/Eyedropper'
-	import Key from 'vue-material-design-icons/Key'
-	import Pencil from 'vue-material-design-icons/Pencil'
+	import IconClose from 'vue-material-design-icons/Close.vue'
+	import IconEyedropper from 'vue-material-design-icons/Eyedropper.vue'
+	import IconKeyOutline from 'vue-material-design-icons/KeyOutline.vue'
+	import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 	export default {
 		components: {
-			Close,
-			Eyedropper,
-			Key,
-			Pencil,
+			IconClose,
+			IconEyedropper,
+			IconKeyOutline,
+			IconPencilOutline,
 		},
 		data() {
 			return {
diff --git a/src/components/NcActionLink/NcActionLink.vue b/src/components/NcActionLink/NcActionLink.vue
index cb167c4bd9..a3f0672aee 100644
--- a/src/components/NcActionLink/NcActionLink.vue
+++ b/src/components/NcActionLink/NcActionLink.vue
@@ -12,7 +12,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 		<NcActions>
 			<NcActionLink href="https://nextcloud.com">
 				<template #icon>
-					<OpenInNew :size="20" />
+					<IconOpenInNew :size="20" />
 				</template>
 				Nextcloud website
 			</NcActionLink>
@@ -22,7 +22,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 			<NcActionLink href="https://www.gnu.org/licenses/gpl.odt"
 				  download="AGPL License text.odt">
 				<template #icon>
-					<Download :size="20" />
+					<IconDownloadOutline :size="20" />
 				</template>
 				Download AGPL license text
 			</NcActionLink>
@@ -31,14 +31,14 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 		<NcActions>
 			<NcActionLink href="https://nextcloud.com">
 				<template #icon>
-					<OpenInNew :size="20" />
+					<IconOpenInNew :size="20" />
 				</template>
 				Nextcloud website
 			</NcActionLink>
 			<NcActionLink href="https://www.gnu.org/licenses/gpl.odt"
 				  download="AGPL License text.odt">
 				<template #icon>
-					<Download :size="20" />
+					<IconDownloadOutline :size="20" />
 				</template>
 				Download AGPL license text
 			</NcActionLink>
@@ -46,13 +46,13 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 	</div>
 </template>
 <script>
-import Download from 'vue-material-design-icons/Download.vue'
-import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import IconDownloadOutline from 'vue-material-design-icons/DownloadOutline.vue'
+import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
 
 export default {
 	components: {
-		Download,
-		OpenInNew,
+		IconDownloadOutline,
+		IconOpenInNew,
 	},
 }
 </script>
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
index 592656749d..bcebe47774 100644
--- a/src/components/NcActionTextEditable/NcActionTextEditable.vue
+++ b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -12,27 +12,27 @@ All undocumented attributes will be bound to the textarea. e.g. `maxlength`
 	<NcActions>
 		<NcActionTextEditable v-model="text1">
 			<template #icon>
-				<Pencil :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 		</NcActionTextEditable>
 		<NcActionTextEditable v-model="text2" disabled>
 			<template #icon>
-				<Pencil :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 		</NcActionTextEditable>
 		<NcActionTextEditable name="text3" v-model="text3">
 			<template #icon>
-				<Pencil :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 		</NcActionTextEditable>
 	</NcActions>
 </template>
 <script>
-import Pencil from 'vue-material-design-icons/Pencil'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		Pencil,
+		IconPencilOutline,
 	},
 
 	data() {
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 0a7df3f4e3..36af004d3b 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -14,18 +14,18 @@ https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-action
 	<NcActions>
 		<NcActionButton @click="actionDelete">
 			<template #icon>
-				<Delete :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 
 export default {
 	components: {
-		Delete,
+		IconTrashCanOutline,
 	},
 	methods: {
 		actionDelete() {
@@ -43,34 +43,34 @@ export default {
 	<NcActions>
 		<NcActionButton @click="showMessage('Edit')">
 			<template #icon>
-				<Pencil :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<Delete :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 		<NcActionLink href="https://nextcloud.com">
 			<template #icon>
-				<OpenInNew :size="20" />
+				<IconOpenInNew :size="20" />
 			</template>
 			Link
 		</NcActionLink>
 	</NcActions>
 </template>
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
-import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		Delete,
-		OpenInNew,
-		Pencil,
+		IconTrashCanOutline,
+		IconOpenInNew,
+		IconPencilOutline,
 	},
 	methods: {
 		showMessage(msg) {
@@ -88,42 +88,42 @@ export default {
 	<NcActions :inline="2">
 		<NcActionButton @click="showMessage('Add')">
 			<template #icon>
-				<Plus :size="20" />
+				<IconPlus :size="20" />
 			</template>
 			Add
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Edit')">
 			<template #icon>
-				<Pencil :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<Delete :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 		<NcActionLink href="https://nextcloud.com">
 			<template #icon>
-				<OpenInNew :size="20" />
+				<IconOpenInNew :size="20" />
 			</template>
 			Link
 		</NcActionLink>
 	</NcActions>
 </template>
 <script>
-import Plus from 'vue-material-design-icons/Plus.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
-import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import IconPlus from 'vue-material-design-icons/Plus.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		Delete,
-		OpenInNew,
-		Pencil,
-		Plus,
+		IconTrashCanOutline,
+		IconOpenInNew,
+		IconPencilOutline,
+		IconPlus,
 	},
 	methods: {
 		showMessage(msg) {
@@ -141,41 +141,41 @@ export default {
 	<NcActions :force-name="true" :inline="2">
 		<NcActionButton @click="showMessage('Add')">
 			<template #icon>
-				<Plus :size="20" />
+				<IconPlus :size="20" />
 			</template>
 			Add
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Edit')">
 			<template #icon>
-				<Pencil :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<Delete :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 		<NcActionLink href="https://nextcloud.com">
 			<template #icon>
-				<OpenInNew :size="20" />
+				<IconOpenInNew :size="20" />
 			</template>
 			Link
 		</NcActionLink>
 	</NcActions>
 </template>
 <script>
-import Plus from 'vue-material-design-icons/Plus.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
-import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import IconPlus from 'vue-material-design-icons/Plus.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 export default {
 	components: {
-		Delete,
-		OpenInNew,
-		Pencil,
-		Plus,
+		IconTrashCanOutline,
+		IconOpenInNew,
+		IconPencilOutline,
+		IconPlus,
 	},
 	methods: {
 		showMessage(msg) {
@@ -192,38 +192,38 @@ export default {
 <template>
 	<NcActions>
 		<template #icon>
-			<Pencil :size="20" />
+			<IconPencilOutline :size="20" />
 		</template>
 		<NcActionButton @click="showMessage('Edit')">
 			<template #icon>
-				<Pencil :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<Delete :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 		<NcActionLink href="https://nextcloud.com">
 			<template #icon>
-				<OpenInNew :size="20" />
+				<IconOpenInNew :size="20" />
 			</template>
 			Link
 		</NcActionLink>
 	</NcActions>
 </template>
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
-import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		Delete,
-		OpenInNew,
-		Pencil,
+		IconTrashCanOutline,
+		IconOpenInNew,
+		IconPencilOutline,
 	},
 	methods: {
 		showMessage(msg) {
@@ -240,46 +240,46 @@ export default {
 <template>
 	<NcActions menu-name="Object management">
 		<template #icon>
-			<Pencil :size="20" />
+			<IconPencilOutline :size="20" />
 		</template>
 		<NcActionButton>
 			<template #icon>
-				<Pencil :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Rename
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Delete :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<ArrowRight :size="20" />
+				<IconArrowRight :size="20" />
 			</template>
 			Validate
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Download :size="20" />
+				<IconTrayArrowDown :size="20" />
 			</template>
 			Download
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
-import Download from 'vue-material-design-icons/Download.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconTrayArrowDown from 'vue-material-design-icons/TrayArrowDown.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		ArrowRight,
-		Delete,
-		Download,
-		Pencil,
+		IconArrowRight,
+		IconTrashCanOutline,
+		IconTrayArrowDown,
+		IconPencilOutline,
 	},
 }
 </script>
@@ -291,26 +291,26 @@ export default {
 	<NcActions :primary="true">
 		<NcActionButton>
 			<template #icon>
-				<Pencil :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Delete :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		Delete,
-		Pencil,
+		IconTrashCanOutline,
+		IconPencilOutline,
 	},
 }
 </script>
@@ -320,48 +320,48 @@ export default {
 <template>
 	<NcActions :primary="true" menu-name="Object management">
 		<template #icon>
-			<Plus :size="20" />
+			<IconPlus :size="20" />
 		</template>
 		<NcActionButton>
 			<template #icon>
-				<Pencil :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Rename
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Delete :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<ArrowRight :size="20" />
+				<IconArrowRight :size="20" />
 			</template>
 			Validate
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Download :size="20" />
+				<IconTrayArrowDown :size="20" />
 			</template>
 			Download
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
-import Download from 'vue-material-design-icons/Download.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
+import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconTrayArrowDown from 'vue-material-design-icons/TrayArrowDown.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import IconPlus from 'vue-material-design-icons/Plus.vue'
 
 export default {
 	components: {
-		ArrowRight,
-		Delete,
-		Download,
-		Pencil,
-		Plus,
+		IconArrowRight,
+		IconTrashCanOutline,
+		IconTrayArrowDown,
+		IconPencilOutline,
+		IconPlus,
 	},
 }
 </script>
@@ -376,17 +376,17 @@ It can be used with one or multiple actions.
 		<NcButton @click="toggled = !toggled">Toggle multiple action</NcButton>
 		<NcActions>
 			<template #icon>
-				<DotsHorizontalCircleOutline :size="20" />
+				<IconDotsHorizontalCircleOutline :size="20" />
 			</template>
 			<NcActionButton>
 				<template #icon>
-					<MicrophoneOff :size="20" />
+					<IconMicrophoneOff :size="20" />
 				</template>
 				Mute
 			</NcActionButton>
 			<NcActionButton v-if="toggled">
 				<template #icon>
-					<Delete :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Delete
 			</NcActionButton>
@@ -394,15 +394,15 @@ It can be used with one or multiple actions.
 	</div>
 </template>
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
-import DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline.vue'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconDotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline.vue'
+import IconMicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
 
 export default {
 	components: {
-		Delete,
-		DotsHorizontalCircleOutline,
-		MicrophoneOff,
+		IconTrashCanOutline,
+		IconDotsHorizontalCircleOutline,
+		IconMicrophoneOff,
 	},
 	data() {
 		return {
@@ -419,26 +419,26 @@ export default {
 	<NcActions :primary="true">
 		<NcActionButton>
 			<template #icon>
-				<Magnify :size="20" />
+				<IconMagnify :size="20" />
 			</template>
 			Search
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Delete :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
-import Magnify from 'vue-material-design-icons/Magnify.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconMagnify from 'vue-material-design-icons/Magnify.vue'
 
 export default {
 	components: {
-		Delete,
-		Magnify,
+		IconTrashCanOutline,
+		IconMagnify,
 	},
 }
 </script>
@@ -451,20 +451,20 @@ export default {
 	<div>
 		<NcActions :variant="current">
 			<template #icon>
-				<SelectColor :size="20" />
+				<IconSelectColor :size="20" />
 			</template>
 
 			<NcActionButton v-if="current" close-after-click @click="define()">
 				<template #icon>
-					<Delete :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Remove
 			</NcActionButton>
 
 			<NcActionButton v-for="row in variants" close-after-click @click="define(row)" :key="`type-icon--${row}`">
 				<template #icon>
-					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
-					<SelectColor v-else :size="20" />
+					<IconCheckboxMarkedCircleOutline v-if="row === current" :size="20" />
+					<IconSelectColor v-else :size="20" />
 				</template>
 				{{ row }}
 			</NcActionButton>
@@ -473,15 +473,15 @@ export default {
 		<NcActions :variant="current" menu-name="Choose a variant">
 			<NcActionButton v-if="current" close-after-click @click="define()">
 				<template #icon>
-					<Delete :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Remove
 			</NcActionButton>
 
 			<NcActionButton v-for="row in variants" close-after-click @click="define(row)" :key="`type-text--${row}`">
 				<template #icon>
-					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
-					<SelectColor v-else :size="20" />
+					<IconCheckboxMarkedCircleOutline v-if="row === current" :size="20" />
+					<IconSelectColor v-else :size="20" />
 				</template>
 				{{ row }}
 			</NcActionButton>
@@ -489,20 +489,20 @@ export default {
 
 		<NcActions :variant="current"  menu-name="Choose a variant">
 			<template #icon>
-				<SelectColor :size="20" />
+				<IconSelectColor :size="20" />
 			</template>
 
 			<NcActionButton v-if="current" close-after-click @click="define()">
 				<template #icon>
-					<Delete :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Remove
 			</NcActionButton>
 
 			<NcActionButton v-for="row in variants" close-after-click @click="define(row)" :key="`type-icon-text--${row}`">
 				<template #icon>
-					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
-					<SelectColor v-else :size="20" />
+					<IconCheckboxMarkedCircleOutline v-if="row === current" :size="20" />
+					<IconSelectColor v-else :size="20" />
 				</template>
 				{{ row }}
 			</NcActionButton>
@@ -511,17 +511,17 @@ export default {
 </template>
 
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
-import Palette from 'vue-material-design-icons/Palette.vue'
-import SelectColor from 'vue-material-design-icons/SelectColor.vue'
-import CheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconPaletteOutline from 'vue-material-design-icons/PaletteOutline.vue'
+import IconSelectColor from 'vue-material-design-icons/SelectColor.vue'
+import IconCheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline.vue'
 
 export default {
 	components: {
-		Delete,
-		Palette,
-		SelectColor,
-		CheckboxMarkedCircleOutline,
+		IconTrashCanOutline,
+		IconPaletteOutline,
+		IconSelectColor,
+		IconCheckboxMarkedCircleOutline,
 	},
 	data() {
 		return {
@@ -558,33 +558,33 @@ export default {
 				<NcActionButtonGroup>
 					<NcActionButton>
 						<template #icon>
-							<StarOutline :size="20" />
+							<IconStarOutline :size="20" />
 						</template>
 						Favorite
 					</NcActionButton>
 					<NcActionButton>
 						<template #icon>
-							<EmailUnread :size="20" />
+							<IconEmail :size="20" />
 						</template>
 						Unread
 					</NcActionButton>
 					<NcActionButton>
 						<template #icon>
-							<Bookmark :size="20" />
+							<IconBookmarkOutline :size="20" />
 						</template>
 						Important
 					</NcActionButton>
 				</NcActionButtonGroup>
 				<NcActionText>
 					<template #icon>
-						<ClockOutlineIcon :size="20" />
+						<IconClockOutline :size="20" />
 					</template>
 					{{ new Date().toLocaleDateString('en-US') }}
 				</NcActionText>
 				<NcActionSeparator />
 				<NcActionButton>
 					<template #icon>
-						<AlertOctagonIcon :size="20" />
+						<IconAlertOctagonOutline :size="20" />
 					</template>
 					Mark as spam
 				</NcActionButton>
@@ -593,13 +593,13 @@ export default {
 				</NcActionCheckbox>
 				<NcActionButton>
 					<template #icon>
-						<OpenInNewIcon :size="20" />
+						<IconOpenInNew :size="20" />
 					</template>
 					Move thread
 				</NcActionButton>
 				<NcActionLink href="#">
 					<template #icon>
-						<DownloadIcon :size="20" />
+						<IconTrayArrowDown :size="20" />
 					</template>
 					Download message
 				</NcActionLink>
@@ -608,41 +608,41 @@ export default {
 		<p>
 			<NcActions aria-label="Text settings" variant="tertiary">
 				<template #icon>
-					<FormatTitle :size="20" />
+					<IconFormatTitle :size="20" />
 				</template>
 				<NcActionButtonGroup name="Alignment">
 					<NcActionButton aria-label="Left">
 						<template #icon>
-							<FormatAlignLeft :size="20" />
+							<IconFormatAlignLeft :size="20" />
 						</template>
 					</NcActionButton>
 					<NcActionButton aria-label="Center">
 						<template #icon>
-							<FormatAlignCenter :size="20" />
+							<IconFormatAlignCenter :size="20" />
 						</template>
 					</NcActionButton>
 					<NcActionButton aria-label="Right">
 						<template #icon>
-							<FormatAlignRight :size="20" />
+							<IconFormatAlignRight :size="20" />
 						</template>
 					</NcActionButton>
 				</NcActionButtonGroup>
 				<NcActionSeparator />
 				<NcActionCheckbox :checked.sync="checked.bold" value="bold">
 					<template #icon>
-						<FormatBold :size="20" />
+						<IconFormatBold :size="20" />
 					</template>
 					Bold
 				</NcActionCheckbox>
 				<NcActionCheckbox :checked.sync="checked.italic" value="italic">
 					<template #icon>
-						<FormatItalic :size="20" />
+						<IconFormatItalic :size="20" />
 					</template>
 					Italic
 				</NcActionCheckbox>
 				<NcActionCheckbox :checked.sync="checked.underline" value="underline">
 					<template #icon>
-						<FormatUnderline :size="20" />
+						<IconFormatUnderline :size="20" />
 					</template>
 					Underline
 				</NcActionCheckbox>
@@ -684,12 +684,12 @@ export default {
 			<NcActions aria-label="Group management">
 				<NcActionInput trailing-button-label="Submit" label="Rename group">
 					<template #icon>
-						<Pencil :size="20" />
+						<IconPencilOutline :size="20" />
 					</template>
 				</NcActionInput>
 				<NcActionButton>
 					<template #icon>
-						<Delete :size="20" />
+						<IconTrashCanOutline :size="20" />
 					</template>
 					Remove group
 				</NcActionButton>
@@ -713,52 +713,52 @@ export default {
 
 <script>
 // Common icons
-import Pencil from 'vue-material-design-icons/Pencil.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 
 // Email icons
-import StarOutline from 'vue-material-design-icons/StarOutline.vue'
-import EmailUnread from 'vue-material-design-icons/Email.vue'
-import Bookmark from 'vue-material-design-icons/Bookmark.vue'
-import ClockOutlineIcon from 'vue-material-design-icons/ClockOutline.vue'
-import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
-import CheckIcon from 'vue-material-design-icons/Check.vue'
-import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
-import DownloadIcon from 'vue-material-design-icons/Download.vue'
+import IconStarOutline from 'vue-material-design-icons/StarOutline.vue'
+import IconEmail from 'vue-material-design-icons/Email.vue'
+import IconBookmarkOutline from 'vue-material-design-icons/BookmarkOutline.vue'
+import IconClockOutline from 'vue-material-design-icons/ClockOutline.vue'
+import IconAlertOctagonOutline from 'vue-material-design-icons/AlertOctagonOutline.vue'
+import IconCheck from 'vue-material-design-icons/Check.vue'
+import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import IconTrayArrowDown from 'vue-material-design-icons/TrayArrowDown.vue'
 
 // Formatting icons
-import FormatTitle from 'vue-material-design-icons/FormatTitle.vue'
-import FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'
-import FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'
-import FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'
-import FormatBold from 'vue-material-design-icons/FormatBold.vue'
-import FormatItalic from 'vue-material-design-icons/FormatItalic.vue'
-import FormatUnderline from 'vue-material-design-icons/FormatUnderline.vue'
+import IconFormatTitle from 'vue-material-design-icons/FormatTitle.vue'
+import IconFormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'
+import IconFormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'
+import IconFormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'
+import IconFormatBold from 'vue-material-design-icons/FormatBold.vue'
+import IconFormatItalic from 'vue-material-design-icons/FormatItalic.vue'
+import IconFormatUnderline from 'vue-material-design-icons/FormatUnderline.vue'
 
 export default {
 	components: {
 		// Common icons
-		Pencil,
-		Delete,
+		IconPencilOutline,
+		IconTrashCanOutline,
 
 		// Email icons
-		StarOutline,
-		EmailUnread,
-		Bookmark,
-		ClockOutlineIcon,
-		AlertOctagonIcon,
-		CheckIcon,
-		OpenInNewIcon,
-		DownloadIcon,
+		IconStarOutline,
+		IconEmail,
+		IconBookmarkOutline,
+		IconClockOutline,
+		IconAlertOctagonOutline,
+		IconCheck,
+		IconOpenInNew,
+		IconTrayArrowDown,
 
 		// Formatting icons
-		FormatTitle,
-		FormatAlignLeft,
-		FormatAlignCenter,
-		FormatAlignRight,
-		FormatBold,
-		FormatItalic,
-		FormatUnderline,
+		IconFormatTitle,
+		IconFormatAlignLeft,
+		IconFormatAlignCenter,
+		IconFormatAlignRight,
+		IconFormatBold,
+		IconFormatItalic,
+		IconFormatUnderline,
 	},
 
 	data() {
@@ -817,7 +817,7 @@ Although it works when actions are not direct children but wrapped in custom com
 				<NcActions>
 					<NcActionButton>
 						<template #icon>
-							<Account :size="20" />
+							<IconAccountOutline :size="20" />
 						</template>
 						Button
 					</NcActionButton>
@@ -837,7 +837,7 @@ Although it works when actions are not direct children but wrapped in custom com
 				<NcActions :inline="2">
 					<NcActionButton v-for="i in 4">
 						<template #icon>
-							<Account :size="20" />
+							<IconAccountOutline :size="20" />
 						</template>
 						Button
 					</NcActionButton>
@@ -857,7 +857,7 @@ Although it works when actions are not direct children but wrapped in custom com
 				<NcActions>
 					<NcActionButton v-for="i in 4">
 						<template #icon>
-							<Account :size="20" />
+							<IconAccountOutline :size="20" />
 						</template>
 						Button
 					</NcActionButton>
@@ -872,7 +872,7 @@ import Account from 'vue-material-design-icons/Account.vue'
 
 export default {
 	components: {
-		Account,
+		IconAccountOutline,
 
 		MyUserActionButton: {
 			name: 'MyUserActionButton',