From 0325622ffd87264270c352f5b47e4284a50f5fa1 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 25 Nov 2025 06:48:25 +0100
Subject: [PATCH 1/3] chore(NcActions): outline icons in docs

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 .../NcActionButton/NcActionButton.vue         |  46 ++---
 .../NcActionInput/NcActionInput.vue           |  28 +--
 src/components/NcActionLink/NcActionLink.vue  |   8 +-
 .../NcActionTextEditable.vue                  |  10 +-
 src/components/NcActions/NcActions.vue        | 162 +++++++++---------
 5 files changed, 127 insertions(+), 127 deletions(-)

diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index bb3b23a42d..4696ce73e5 100644
--- a/src/components/NcActionButton/NcActionButton.vue
+++ b/src/components/NcActionButton/NcActionButton.vue
@@ -11,13 +11,13 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 		<NcActions>
 			<NcActionButton @click="showMessage('Delete')">
 				<template #icon>
-					<Delete :size="20" />
+					<DeleteOutline :size="20" />
 				</template>
 				Delete
 			</NcActionButton>
 			<NcActionButton :close-after-click="true" @click="showMessage('Delete and close menu')">
 				<template #icon>
-					<Delete :size="20" />
+					<DeleteOutline :size="20" />
 				</template>
 				Delete and close
 			</NcActionButton>
@@ -29,19 +29,19 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 			</NcActionButton>
 			<NcActionButton :disabled="true" @click="showMessage('Disabled')">
 				<template #icon>
-					<Delete :size="20" />
+					<DeleteOutline :size="20" />
 				</template>
 				Disabled button
 			</NcActionButton>
 		</NcActions>
 	</template>
 	<script>
-	import Delete from 'vue-material-design-icons/Delete.vue'
+	import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 	import Plus from 'vue-material-design-icons/Plus.vue'
 
 	export default {
 		components: {
-			Delete,
+			DeleteOutline,
 			Plus,
 		},
 		methods: {
@@ -68,27 +68,27 @@ For the same purpose, but in a more compact way, `description` prop can be used.
 			</NcActionButton>
 			<NcActionButton name="Long button" @click="showMessage('Delete')">
 				<template #icon>
-					<Delete :size="20" />
+					<DeleteOutline :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" />
+					<PencilOutline :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 DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+	import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 	import Plus from 'vue-material-design-icons/Plus.vue'
 
 	export default {
 		components: {
-			Delete,
-			Pencil,
+			DeleteOutline,
+			PencilOutline,
 			Plus,
 		},
 		methods: {
@@ -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" />
+				<HandBackLeftOutline :size="20" />
 			</template>
 			Raise left hand
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<HandBackRight :size="20" />
+				<HandBackRightOutline :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 HandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
+import HandBackRightOutline from 'vue-material-design-icons/HandBackRightOutline.vue'
 
 export default {
 	components: {
-		HandBackLeft,
-		HandBackRight,
+		HandBackLeftOutline,
+		HandBackRightOutline,
 	},
 }
 </script>
@@ -203,7 +203,7 @@ 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" />
+				<HandBackLeftOutline :size="20" />
 			</template>
 			Raise hand
 		</NcActionButton>
@@ -216,12 +216,12 @@ This also allows tri-state behavior (`true`, `false`, `null`) in which case `ari
 	</NcActions>
 </template>
 <script>
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
+import HandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
 import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
 
 export default {
 	components: {
-		HandBackLeft,
+		HandBackLeftOutline,
 		Fullscreen,
 	},
 	data() {
@@ -254,7 +254,7 @@ Note: unlike native radio buttons, `NcActionButton` are not grouped by name, so
 			</NcActionButton>
 			<NcActionButton :model-value.sync="payment" type="radio" value="card">
 				<template #icon>
-					<CreditCard :size="20" />
+					<CreditCardOutline :size="20" />
 				</template>
 				Pay by card
 			</NcActionButton>
@@ -286,7 +286,7 @@ Note: unlike native radio buttons, `NcActionButton` are not grouped by name, so
 </template>
 <script>
 import Cash from 'vue-material-design-icons/Cash.vue'
-import CreditCard from 'vue-material-design-icons/CreditCard.vue'
+import CreditCardOutline from 'vue-material-design-icons/CreditCardOutline.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'
@@ -294,7 +294,7 @@ import FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'
 export default {
 	components: {
 		Cash,
-		CreditCard,
+		CreditCardOutline,
 		FormatAlignLeft,
 		FormatAlignCenter,
 		FormatAlignRight,
diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
index 28760873d3..dc0d509c67 100644
--- a/src/components/NcActionInput/NcActionInput.vue
+++ b/src/components/NcActionInput/NcActionInput.vue
@@ -16,29 +16,29 @@ 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" />
+					<PencilOutline :size="20" />
 				</template>
 			</NcActionInput>
 			<NcActionInput v-model="text" :show-trailing-button="false" label="Input without trailing button">
 				<template #icon>
-					<Pencil :size="20" />
+					<PencilOutline :size="20" />
 				</template>
 			</NcActionInput>
 			<NcActionInput v-model="text" label="Input with placeholder">
 				<template #icon>
-					<Pencil :size="20" />
+					<PencilOutline :size="20" />
 				</template>
 				This is the placeholder
 			</NcActionInput>
 			<NcActionInput type="password" v-model="text" label="Password with visible label">
 				<template #icon>
-					<Key :size="20" />
+					<KeyOutline :size="20" />
 				</template>
 				Password placeholder
 			</NcActionInput>
 			<NcActionInput type="password" v-model="text" :show-trailing-button="false">
 				<template #icon>
-					<Key :size="20" />
+					<KeyOutline :size="20" />
 				</template>
 				Password placeholder
 			</NcActionInput>
@@ -50,7 +50,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
 			</NcActionInput>
 			<NcActionInput label="Visible label" v-model="text">
 				<template #icon>
-					<Pencil :size="20" />
+					<PencilOutline :size="20" />
 				</template>
 				Input with visible label
 			</NcActionInput>
@@ -61,13 +61,13 @@ For the `NcSelect` component, all events will be passed through. Please see the
 			</NcActionInput>
 			<NcActionInput type="date" isNativePicker v-model="date">
 				<template #icon>
-					<Pencil :size="20" />
+					<PencilOutline :size="20" />
 				</template>
 				Please pick a date
 			</NcActionInput>
 			<NcActionInput v-model="date" type="date">
 				<template #icon>
-					<Pencil :size="20" />
+					<PencilOutline :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" />
+					<PencilOutline :size="20" />
 				</template>
 				Please pick a fruit
 			</NcActionInput>
@@ -90,7 +90,7 @@ 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" />
+					<PencilOutline :size="20" />
 				</template>
 				Please pick a fruit object
 			</NcActionInput>
@@ -99,15 +99,15 @@ For the `NcSelect` component, all events will be passed through. Please see the
 	<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 KeyOutline from 'vue-material-design-icons/KeyOutline'
+	import PencilOutline from 'vue-material-design-icons/PencilOutline'
 
 	export default {
 		components: {
 			Close,
 			Eyedropper,
-			Key,
-			Pencil,
+			KeyOutline,
+			PencilOutline,
 		},
 		data() {
 			return {
diff --git a/src/components/NcActionLink/NcActionLink.vue b/src/components/NcActionLink/NcActionLink.vue
index cb167c4bd9..293e5280d2 100644
--- a/src/components/NcActionLink/NcActionLink.vue
+++ b/src/components/NcActionLink/NcActionLink.vue
@@ -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" />
+					<DownloadOutline :size="20" />
 				</template>
 				Download AGPL license text
 			</NcActionLink>
@@ -38,7 +38,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" />
+					<DownloadOutline :size="20" />
 				</template>
 				Download AGPL license text
 			</NcActionLink>
@@ -46,12 +46,12 @@ 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 DownloadOutline from 'vue-material-design-icons/DownloadOutline.vue'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
 
 export default {
 	components: {
-		Download,
+		DownloadOutline,
 		OpenInNew,
 	},
 }
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
index 592656749d..1d4159f485 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" />
+				<PencilOutline :size="20" />
 			</template>
 		</NcActionTextEditable>
 		<NcActionTextEditable v-model="text2" disabled>
 			<template #icon>
-				<Pencil :size="20" />
+				<PencilOutline :size="20" />
 			</template>
 		</NcActionTextEditable>
 		<NcActionTextEditable name="text3" v-model="text3">
 			<template #icon>
-				<Pencil :size="20" />
+				<PencilOutline :size="20" />
 			</template>
 		</NcActionTextEditable>
 	</NcActions>
 </template>
 <script>
-import Pencil from 'vue-material-design-icons/Pencil'
+import PencilOutline from 'vue-material-design-icons/PencilOutline'
 
 export default {
 	components: {
-		Pencil,
+		PencilOutline,
 	},
 
 	data() {
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 0a7df3f4e3..b97f547c12 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" />
+				<DeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 
 export default {
 	components: {
-		Delete,
+		DeleteOutline,
 	},
 	methods: {
 		actionDelete() {
@@ -43,13 +43,13 @@ export default {
 	<NcActions>
 		<NcActionButton @click="showMessage('Edit')">
 			<template #icon>
-				<Pencil :size="20" />
+				<PencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<Delete :size="20" />
+				<DeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -62,15 +62,15 @@ export default {
 	</NcActions>
 </template>
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		Delete,
+		DeleteOutline,
 		OpenInNew,
-		Pencil,
+		PencilOutline,
 	},
 	methods: {
 		showMessage(msg) {
@@ -94,13 +94,13 @@ export default {
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Edit')">
 			<template #icon>
-				<Pencil :size="20" />
+				<PencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<Delete :size="20" />
+				<DeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -114,15 +114,15 @@ export default {
 </template>
 <script>
 import Plus from 'vue-material-design-icons/Plus.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		Delete,
+		DeleteOutline,
 		OpenInNew,
-		Pencil,
+		PencilOutline,
 		Plus,
 	},
 	methods: {
@@ -147,13 +147,13 @@ export default {
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Edit')">
 			<template #icon>
-				<Pencil :size="20" />
+				<PencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<Delete :size="20" />
+				<DeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -167,14 +167,14 @@ export default {
 </template>
 <script>
 import Plus from 'vue-material-design-icons/Plus.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 export default {
 	components: {
-		Delete,
+		DeleteOutline,
 		OpenInNew,
-		Pencil,
+		PencilOutline,
 		Plus,
 	},
 	methods: {
@@ -192,17 +192,17 @@ export default {
 <template>
 	<NcActions>
 		<template #icon>
-			<Pencil :size="20" />
+			<PencilOutline :size="20" />
 		</template>
 		<NcActionButton @click="showMessage('Edit')">
 			<template #icon>
-				<Pencil :size="20" />
+				<PencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<Delete :size="20" />
+				<DeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -215,15 +215,15 @@ export default {
 	</NcActions>
 </template>
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		Delete,
+		DeleteOutline,
 		OpenInNew,
-		Pencil,
+		PencilOutline,
 	},
 	methods: {
 		showMessage(msg) {
@@ -240,17 +240,17 @@ export default {
 <template>
 	<NcActions menu-name="Object management">
 		<template #icon>
-			<Pencil :size="20" />
+			<PencilOutline :size="20" />
 		</template>
 		<NcActionButton>
 			<template #icon>
-				<Pencil :size="20" />
+				<PencilOutline :size="20" />
 			</template>
 			Rename
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Delete :size="20" />
+				<DeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -262,7 +262,7 @@ export default {
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Download :size="20" />
+				<DownloadOutline :size="20" />
 			</template>
 			Download
 		</NcActionButton>
@@ -270,16 +270,16 @@ export default {
 </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 DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import DownloadOutline from 'vue-material-design-icons/DownloadOutline.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
 		ArrowRight,
-		Delete,
-		Download,
-		Pencil,
+		DeleteOutline,
+		DownloadOutline,
+		PencilOutline,
 	},
 }
 </script>
@@ -291,26 +291,26 @@ export default {
 	<NcActions :primary="true">
 		<NcActionButton>
 			<template #icon>
-				<Pencil :size="20" />
+				<PencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Delete :size="20" />
+				<DeleteOutline :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 DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		Delete,
-		Pencil,
+		DeleteOutline,
+		PencilOutline,
 	},
 }
 </script>
@@ -324,13 +324,13 @@ export default {
 		</template>
 		<NcActionButton>
 			<template #icon>
-				<Pencil :size="20" />
+				<PencilOutline :size="20" />
 			</template>
 			Rename
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Delete :size="20" />
+				<DeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -342,7 +342,7 @@ export default {
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Download :size="20" />
+				<DownloadOutline :size="20" />
 			</template>
 			Download
 		</NcActionButton>
@@ -350,17 +350,17 @@ export default {
 </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 DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import DownloadOutline from 'vue-material-design-icons/DownloadOutline.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 
 export default {
 	components: {
 		ArrowRight,
-		Delete,
-		Download,
-		Pencil,
+		DeleteOutline,
+		DownloadOutline,
+		PencilOutline,
 		Plus,
 	},
 }
@@ -386,7 +386,7 @@ It can be used with one or multiple actions.
 			</NcActionButton>
 			<NcActionButton v-if="toggled">
 				<template #icon>
-					<Delete :size="20" />
+					<DeleteOutline :size="20" />
 				</template>
 				Delete
 			</NcActionButton>
@@ -394,13 +394,13 @@ It can be used with one or multiple actions.
 	</div>
 </template>
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline.vue'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
 
 export default {
 	components: {
-		Delete,
+		DeleteOutline,
 		DotsHorizontalCircleOutline,
 		MicrophoneOff,
 	},
@@ -425,19 +425,19 @@ export default {
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<Delete :size="20" />
+				<DeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 
 export default {
 	components: {
-		Delete,
+		DeleteOutline,
 		Magnify,
 	},
 }
@@ -456,7 +456,7 @@ export default {
 
 			<NcActionButton v-if="current" close-after-click @click="define()">
 				<template #icon>
-					<Delete :size="20" />
+					<DeleteOutline :size="20" />
 				</template>
 				Remove
 			</NcActionButton>
@@ -473,7 +473,7 @@ export default {
 		<NcActions :variant="current" menu-name="Choose a variant">
 			<NcActionButton v-if="current" close-after-click @click="define()">
 				<template #icon>
-					<Delete :size="20" />
+					<DeleteOutline :size="20" />
 				</template>
 				Remove
 			</NcActionButton>
@@ -494,7 +494,7 @@ export default {
 
 			<NcActionButton v-if="current" close-after-click @click="define()">
 				<template #icon>
-					<Delete :size="20" />
+					<DeleteOutline :size="20" />
 				</template>
 				Remove
 			</NcActionButton>
@@ -511,15 +511,15 @@ export default {
 </template>
 
 <script>
-import Delete from 'vue-material-design-icons/Delete.vue'
-import Palette from 'vue-material-design-icons/Palette.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import PaletteOutline from 'vue-material-design-icons/PaletteOutline.vue'
 import SelectColor from 'vue-material-design-icons/SelectColor.vue'
 import CheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline.vue'
 
 export default {
 	components: {
-		Delete,
-		Palette,
+		DeleteOutline,
+		PaletteOutline,
 		SelectColor,
 		CheckboxMarkedCircleOutline,
 	},
@@ -570,7 +570,7 @@ export default {
 					</NcActionButton>
 					<NcActionButton>
 						<template #icon>
-							<Bookmark :size="20" />
+							<BookmarkOutline :size="20" />
 						</template>
 						Important
 					</NcActionButton>
@@ -684,12 +684,12 @@ export default {
 			<NcActions aria-label="Group management">
 				<NcActionInput trailing-button-label="Submit" label="Rename group">
 					<template #icon>
-						<Pencil :size="20" />
+						<PencilOutline :size="20" />
 					</template>
 				</NcActionInput>
 				<NcActionButton>
 					<template #icon>
-						<Delete :size="20" />
+						<DeleteOutline :size="20" />
 					</template>
 					Remove group
 				</NcActionButton>
@@ -713,18 +713,18 @@ export default {
 
 <script>
 // Common icons
-import Pencil from 'vue-material-design-icons/Pencil.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.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 BookmarkOutline from 'vue-material-design-icons/BookmarkOutline.vue'
 import ClockOutlineIcon from 'vue-material-design-icons/ClockOutline.vue'
-import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
+import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.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 DownloadIcon from 'vue-material-design-icons/DownloadOutline.vue'
 
 // Formatting icons
 import FormatTitle from 'vue-material-design-icons/FormatTitle.vue'
@@ -738,13 +738,13 @@ import FormatUnderline from 'vue-material-design-icons/FormatUnderline.vue'
 export default {
 	components: {
 		// Common icons
-		Pencil,
-		Delete,
+		PencilOutline,
+		DeleteOutline,
 
 		// Email icons
 		StarOutline,
 		EmailUnread,
-		Bookmark,
+		BookmarkOutline,
 		ClockOutlineIcon,
 		AlertOctagonIcon,
 		CheckIcon,
@@ -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" />
+							<AccountOutline :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" />
+							<AccountOutline :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" />
+							<AccountOutline :size="20" />
 						</template>
 						Button
 					</NcActionButton>
@@ -872,7 +872,7 @@ import Account from 'vue-material-design-icons/Account.vue'
 
 export default {
 	components: {
-		Account,
+		AccountOutline,
 
 		MyUserActionButton: {
 			name: 'MyUserActionButton',

From 54aa3414119accd17068f86fd7178bd8d675c544 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 25 Nov 2025 07:00:26 +0100
Subject: [PATCH 2/3] chore(NcActions): normalize icon import

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 .../NcActionButton/NcActionButton.vue         | 100 +++---
 .../NcActionButtonGroup.vue                   |  24 +-
 .../NcActionInput/NcActionInput.vue           |  40 +--
 src/components/NcActionLink/NcActionLink.vue  |  16 +-
 .../NcActionTextEditable.vue                  |  10 +-
 src/components/NcActions/NcActions.vue        | 336 +++++++++---------
 6 files changed, 263 insertions(+), 263 deletions(-)

diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index 4696ce73e5..4e0ab19eba 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>
-					<DeleteOutline :size="20" />
+					<IconDeleteOutline :size="20" />
 				</template>
 				Delete
 			</NcActionButton>
 			<NcActionButton :close-after-click="true" @click="showMessage('Delete and close menu')">
 				<template #icon>
-					<DeleteOutline :size="20" />
+					<IconDeleteOutline :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>
-					<DeleteOutline :size="20" />
+					<IconDeleteOutline :size="20" />
 				</template>
 				Disabled button
 			</NcActionButton>
 		</NcActions>
 	</template>
 	<script>
-	import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-	import Plus from 'vue-material-design-icons/Plus.vue'
+	import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+	import IconPlus from 'vue-material-design-icons/Plus.vue'
 
 	export default {
 		components: {
-			DeleteOutline,
-			Plus,
+			IconDeleteOutline,
+			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>
-					<DeleteOutline :size="20" />
+					<IconDeleteOutline :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>
-					<PencilOutline :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 				Edit
 			</NcActionButton>
 		</NcActions>
 	</template>
 	<script>
-	import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-	import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
-	import Plus from 'vue-material-design-icons/Plus.vue'
+	import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+	import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+	import IconPlus from 'vue-material-design-icons/Plus.vue'
 
 	export default {
 		components: {
-			DeleteOutline,
-			PencilOutline,
-			Plus,
+			IconDeleteOutline,
+			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>
-				<HandBackLeftOutline :size="20" />
+				<IconHandBackLeftOutline :size="20" />
 			</template>
 			Raise left hand
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<HandBackRightOutline :size="20" />
+				<IconHandBackRightOutline :size="20" />
 			</template>
 			Raise right hand
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import HandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
-import HandBackRightOutline from 'vue-material-design-icons/HandBackRightOutline.vue'
+import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
+import IconHandBackRightOutline from 'vue-material-design-icons/HandBackRightOutline.vue'
 
 export default {
 	components: {
-		HandBackLeftOutline,
-		HandBackRightOutline,
+		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>
-				<HandBackLeftOutline :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 HandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.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: {
-		HandBackLeftOutline,
-		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>
-					<CreditCardOutline :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 CreditCardOutline from 'vue-material-design-icons/CreditCardOutline.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,
-		CreditCardOutline,
-		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 dc0d509c67..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>
-					<PencilOutline :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 			</NcActionInput>
 			<NcActionInput v-model="text" :show-trailing-button="false" label="Input without trailing button">
 				<template #icon>
-					<PencilOutline :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 			</NcActionInput>
 			<NcActionInput v-model="text" label="Input with placeholder">
 				<template #icon>
-					<PencilOutline :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 				This is the placeholder
 			</NcActionInput>
 			<NcActionInput type="password" v-model="text" label="Password with visible label">
 				<template #icon>
-					<KeyOutline :size="20" />
+					<IconKeyOutline :size="20" />
 				</template>
 				Password placeholder
 			</NcActionInput>
 			<NcActionInput type="password" v-model="text" :show-trailing-button="false">
 				<template #icon>
-					<KeyOutline :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>
-					<PencilOutline :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>
-					<PencilOutline :size="20" />
+					<IconPencilOutline :size="20" />
 				</template>
 				Please pick a date
 			</NcActionInput>
 			<NcActionInput v-model="date" type="date">
 				<template #icon>
-					<PencilOutline :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>
-					<PencilOutline :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>
-					<PencilOutline :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 KeyOutline from 'vue-material-design-icons/KeyOutline'
-	import PencilOutline from 'vue-material-design-icons/PencilOutline'
+	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,
-			KeyOutline,
-			PencilOutline,
+			IconClose,
+			IconEyedropper,
+			IconKeyOutline,
+			IconPencilOutline,
 		},
 		data() {
 			return {
diff --git a/src/components/NcActionLink/NcActionLink.vue b/src/components/NcActionLink/NcActionLink.vue
index 293e5280d2..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>
-					<DownloadOutline :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>
-					<DownloadOutline :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 DownloadOutline from 'vue-material-design-icons/DownloadOutline.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: {
-		DownloadOutline,
-		OpenInNew,
+		IconDownloadOutline,
+		IconOpenInNew,
 	},
 }
 </script>
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
index 1d4159f485..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>
-				<PencilOutline :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 		</NcActionTextEditable>
 		<NcActionTextEditable v-model="text2" disabled>
 			<template #icon>
-				<PencilOutline :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 		</NcActionTextEditable>
 		<NcActionTextEditable name="text3" v-model="text3">
 			<template #icon>
-				<PencilOutline :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 		</NcActionTextEditable>
 	</NcActions>
 </template>
 <script>
-import PencilOutline from 'vue-material-design-icons/PencilOutline'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		PencilOutline,
+		IconPencilOutline,
 	},
 
 	data() {
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index b97f547c12..c5fb0d05b7 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>
-				<DeleteOutline :size="20" />
+				<IconDeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 
 export default {
 	components: {
-		DeleteOutline,
+		IconDeleteOutline,
 	},
 	methods: {
 		actionDelete() {
@@ -43,34 +43,34 @@ export default {
 	<NcActions>
 		<NcActionButton @click="showMessage('Edit')">
 			<template #icon>
-				<PencilOutline :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<DeleteOutline :size="20" />
+				<IconDeleteOutline :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 DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		DeleteOutline,
-		OpenInNew,
-		PencilOutline,
+		IconDeleteOutline,
+		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>
-				<PencilOutline :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<DeleteOutline :size="20" />
+				<IconDeleteOutline :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 DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import IconPlus from 'vue-material-design-icons/Plus.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		DeleteOutline,
-		OpenInNew,
-		PencilOutline,
-		Plus,
+		IconDeleteOutline,
+		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>
-				<PencilOutline :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<DeleteOutline :size="20" />
+				<IconDeleteOutline :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 DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import IconPlus from 'vue-material-design-icons/Plus.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 export default {
 	components: {
-		DeleteOutline,
-		OpenInNew,
-		PencilOutline,
-		Plus,
+		IconDeleteOutline,
+		IconOpenInNew,
+		IconPencilOutline,
+		IconPlus,
 	},
 	methods: {
 		showMessage(msg) {
@@ -192,38 +192,38 @@ export default {
 <template>
 	<NcActions>
 		<template #icon>
-			<PencilOutline :size="20" />
+			<IconPencilOutline :size="20" />
 		</template>
 		<NcActionButton @click="showMessage('Edit')">
 			<template #icon>
-				<PencilOutline :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<DeleteOutline :size="20" />
+				<IconDeleteOutline :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 DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		DeleteOutline,
-		OpenInNew,
-		PencilOutline,
+		IconDeleteOutline,
+		IconOpenInNew,
+		IconPencilOutline,
 	},
 	methods: {
 		showMessage(msg) {
@@ -240,46 +240,46 @@ export default {
 <template>
 	<NcActions menu-name="Object management">
 		<template #icon>
-			<PencilOutline :size="20" />
+			<IconPencilOutline :size="20" />
 		</template>
 		<NcActionButton>
 			<template #icon>
-				<PencilOutline :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Rename
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<DeleteOutline :size="20" />
+				<IconDeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<ArrowRight :size="20" />
+				<IconArrowRight :size="20" />
 			</template>
 			Validate
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<DownloadOutline :size="20" />
+				<IconDownloadOutline :size="20" />
 			</template>
 			Download
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import DownloadOutline from 'vue-material-design-icons/DownloadOutline.vue'
-import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconDownloadOutline from 'vue-material-design-icons/DownloadOutline.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		ArrowRight,
-		DeleteOutline,
-		DownloadOutline,
-		PencilOutline,
+		IconArrowRight,
+		IconDeleteOutline,
+		IconDownloadOutline,
+		IconPencilOutline,
 	},
 }
 </script>
@@ -291,26 +291,26 @@ export default {
 	<NcActions :primary="true">
 		<NcActionButton>
 			<template #icon>
-				<PencilOutline :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Edit
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<DeleteOutline :size="20" />
+				<IconDeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		DeleteOutline,
-		PencilOutline,
+		IconDeleteOutline,
+		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>
-				<PencilOutline :size="20" />
+				<IconPencilOutline :size="20" />
 			</template>
 			Rename
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<DeleteOutline :size="20" />
+				<IconDeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<ArrowRight :size="20" />
+				<IconArrowRight :size="20" />
 			</template>
 			Validate
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<DownloadOutline :size="20" />
+				<IconDownloadOutline :size="20" />
 			</template>
 			Download
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import DownloadOutline from 'vue-material-design-icons/DownloadOutline.vue'
-import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
+import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconDownloadOutline from 'vue-material-design-icons/DownloadOutline.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import IconPlus from 'vue-material-design-icons/Plus.vue'
 
 export default {
 	components: {
-		ArrowRight,
-		DeleteOutline,
-		DownloadOutline,
-		PencilOutline,
-		Plus,
+		IconArrowRight,
+		IconDeleteOutline,
+		IconDownloadOutline,
+		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>
-					<DeleteOutline :size="20" />
+					<IconDeleteOutline :size="20" />
 				</template>
 				Delete
 			</NcActionButton>
@@ -394,15 +394,15 @@ It can be used with one or multiple actions.
 	</div>
 </template>
 <script>
-import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline.vue'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconDotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline.vue'
+import IconMicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
 
 export default {
 	components: {
-		DeleteOutline,
-		DotsHorizontalCircleOutline,
-		MicrophoneOff,
+		IconDeleteOutline,
+		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>
-				<DeleteOutline :size="20" />
+				<IconDeleteOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import Magnify from 'vue-material-design-icons/Magnify.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconMagnify from 'vue-material-design-icons/Magnify.vue'
 
 export default {
 	components: {
-		DeleteOutline,
-		Magnify,
+		IconDeleteOutline,
+		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>
-					<DeleteOutline :size="20" />
+					<IconDeleteOutline :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>
-					<DeleteOutline :size="20" />
+					<IconDeleteOutline :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>
-					<DeleteOutline :size="20" />
+					<IconDeleteOutline :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 DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import PaletteOutline from 'vue-material-design-icons/PaletteOutline.vue'
-import SelectColor from 'vue-material-design-icons/SelectColor.vue'
-import CheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.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: {
-		DeleteOutline,
-		PaletteOutline,
-		SelectColor,
-		CheckboxMarkedCircleOutline,
+		IconDeleteOutline,
+		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>
-							<BookmarkOutline :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" />
+						<IconDownloadOutline :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>
-						<PencilOutline :size="20" />
+						<IconPencilOutline :size="20" />
 					</template>
 				</NcActionInput>
 				<NcActionButton>
 					<template #icon>
-						<DeleteOutline :size="20" />
+						<IconDeleteOutline :size="20" />
 					</template>
 					Remove group
 				</NcActionButton>
@@ -713,52 +713,52 @@ export default {
 
 <script>
 // Common icons
-import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
-import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 
 // Email icons
-import StarOutline from 'vue-material-design-icons/StarOutline.vue'
-import EmailUnread from 'vue-material-design-icons/Email.vue'
-import BookmarkOutline from 'vue-material-design-icons/BookmarkOutline.vue'
-import ClockOutlineIcon from 'vue-material-design-icons/ClockOutline.vue'
-import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.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/DownloadOutline.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 IconDownloadOutline from 'vue-material-design-icons/DownloadOutline.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
-		PencilOutline,
-		DeleteOutline,
+		IconPencilOutline,
+		IconDeleteOutline,
 
 		// Email icons
-		StarOutline,
-		EmailUnread,
-		BookmarkOutline,
-		ClockOutlineIcon,
-		AlertOctagonIcon,
-		CheckIcon,
-		OpenInNewIcon,
-		DownloadIcon,
+		IconStarOutline,
+		IconEmail,
+		IconBookmarkOutline,
+		IconClockOutline,
+		IconAlertOctagonOutline,
+		IconCheck,
+		IconOpenInNew,
+		IconDownloadOutline,
 
 		// 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>
-							<AccountOutline :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>
-							<AccountOutline :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>
-							<AccountOutline :size="20" />
+							<IconAccountOutline :size="20" />
 						</template>
 						Button
 					</NcActionButton>
@@ -872,7 +872,7 @@ import Account from 'vue-material-design-icons/Account.vue'
 
 export default {
 	components: {
-		AccountOutline,
+		IconAccountOutline,
 
 		MyUserActionButton: {
 			name: 'MyUserActionButton',

From 4fade781dc2d5227d2f3ce563b486547caf3e2d5 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 25 Nov 2025 10:29:41 +0100
Subject: [PATCH 3/3] chore(NcActions): use design-recommended icons in docs

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

[skip ci]
---
 .../NcActionButton/NcActionButton.vue         | 16 ++--
 src/components/NcActions/NcActions.vue        | 94 +++++++++----------
 2 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index 4e0ab19eba..48b75555ba 100644
--- a/src/components/NcActionButton/NcActionButton.vue
+++ b/src/components/NcActionButton/NcActionButton.vue
@@ -11,13 +11,13 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 		<NcActions>
 			<NcActionButton @click="showMessage('Delete')">
 				<template #icon>
-					<IconDeleteOutline :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Delete
 			</NcActionButton>
 			<NcActionButton :close-after-click="true" @click="showMessage('Delete and close menu')">
 				<template #icon>
-					<IconDeleteOutline :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Delete and close
 			</NcActionButton>
@@ -29,19 +29,19 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 			</NcActionButton>
 			<NcActionButton :disabled="true" @click="showMessage('Disabled')">
 				<template #icon>
-					<IconDeleteOutline :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Disabled button
 			</NcActionButton>
 		</NcActions>
 	</template>
 	<script>
-	import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+	import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 	import IconPlus from 'vue-material-design-icons/Plus.vue'
 
 	export default {
 		components: {
-			IconDeleteOutline,
+			IconTrashCanOutline,
 			IconPlus,
 		},
 		methods: {
@@ -68,7 +68,7 @@ For the same purpose, but in a more compact way, `description` prop can be used.
 			</NcActionButton>
 			<NcActionButton name="Long button" @click="showMessage('Delete')">
 				<template #icon>
-					<IconDeleteOutline :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				This button is associated with a very long text.\nAnd with new lines too.
 			</NcActionButton>
@@ -81,13 +81,13 @@ For the same purpose, but in a more compact way, `description` prop can be used.
 		</NcActions>
 	</template>
 	<script>
-	import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.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: {
-			IconDeleteOutline,
+			IconTrashCanOutline,
 			IconPencilOutline,
 			IconPlus,
 		},
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index c5fb0d05b7..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>
-				<IconDeleteOutline :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 
 export default {
 	components: {
-		IconDeleteOutline,
+		IconTrashCanOutline,
 	},
 	methods: {
 		actionDelete() {
@@ -49,7 +49,7 @@ export default {
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<IconDeleteOutline :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -62,13 +62,13 @@ export default {
 	</NcActions>
 </template>
 <script>
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.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: {
-		IconDeleteOutline,
+		IconTrashCanOutline,
 		IconOpenInNew,
 		IconPencilOutline,
 	},
@@ -100,7 +100,7 @@ export default {
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<IconDeleteOutline :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -114,13 +114,13 @@ export default {
 </template>
 <script>
 import IconPlus from 'vue-material-design-icons/Plus.vue'
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.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: {
-		IconDeleteOutline,
+		IconTrashCanOutline,
 		IconOpenInNew,
 		IconPencilOutline,
 		IconPlus,
@@ -153,7 +153,7 @@ export default {
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<IconDeleteOutline :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -167,12 +167,12 @@ export default {
 </template>
 <script>
 import IconPlus from 'vue-material-design-icons/Plus.vue'
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.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: {
-		IconDeleteOutline,
+		IconTrashCanOutline,
 		IconOpenInNew,
 		IconPencilOutline,
 		IconPlus,
@@ -202,7 +202,7 @@ export default {
 		</NcActionButton>
 		<NcActionButton @click="showMessage('Delete')">
 			<template #icon>
-				<IconDeleteOutline :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -215,13 +215,13 @@ export default {
 	</NcActions>
 </template>
 <script>
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.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: {
-		IconDeleteOutline,
+		IconTrashCanOutline,
 		IconOpenInNew,
 		IconPencilOutline,
 	},
@@ -250,7 +250,7 @@ export default {
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<IconDeleteOutline :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -262,7 +262,7 @@ export default {
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<IconDownloadOutline :size="20" />
+				<IconTrayArrowDown :size="20" />
 			</template>
 			Download
 		</NcActionButton>
@@ -270,15 +270,15 @@ export default {
 </template>
 <script>
 import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import IconDownloadOutline from 'vue-material-design-icons/DownloadOutline.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: {
 		IconArrowRight,
-		IconDeleteOutline,
-		IconDownloadOutline,
+		IconTrashCanOutline,
+		IconTrayArrowDown,
 		IconPencilOutline,
 	},
 }
@@ -297,19 +297,19 @@ export default {
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<IconDeleteOutline :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 export default {
 	components: {
-		IconDeleteOutline,
+		IconTrashCanOutline,
 		IconPencilOutline,
 	},
 }
@@ -330,7 +330,7 @@ export default {
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<IconDeleteOutline :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
@@ -342,7 +342,7 @@ export default {
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<IconDownloadOutline :size="20" />
+				<IconTrayArrowDown :size="20" />
 			</template>
 			Download
 		</NcActionButton>
@@ -350,16 +350,16 @@ export default {
 </template>
 <script>
 import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import IconDownloadOutline from 'vue-material-design-icons/DownloadOutline.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: {
 		IconArrowRight,
-		IconDeleteOutline,
-		IconDownloadOutline,
+		IconTrashCanOutline,
+		IconTrayArrowDown,
 		IconPencilOutline,
 		IconPlus,
 	},
@@ -386,7 +386,7 @@ It can be used with one or multiple actions.
 			</NcActionButton>
 			<NcActionButton v-if="toggled">
 				<template #icon>
-					<IconDeleteOutline :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Delete
 			</NcActionButton>
@@ -394,13 +394,13 @@ It can be used with one or multiple actions.
 	</div>
 </template>
 <script>
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.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: {
-		IconDeleteOutline,
+		IconTrashCanOutline,
 		IconDotsHorizontalCircleOutline,
 		IconMicrophoneOff,
 	},
@@ -425,19 +425,19 @@ export default {
 		</NcActionButton>
 		<NcActionButton>
 			<template #icon>
-				<IconDeleteOutline :size="20" />
+				<IconTrashCanOutline :size="20" />
 			</template>
 			Delete
 		</NcActionButton>
 	</NcActions>
 </template>
 <script>
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import IconMagnify from 'vue-material-design-icons/Magnify.vue'
 
 export default {
 	components: {
-		IconDeleteOutline,
+		IconTrashCanOutline,
 		IconMagnify,
 	},
 }
@@ -456,7 +456,7 @@ export default {
 
 			<NcActionButton v-if="current" close-after-click @click="define()">
 				<template #icon>
-					<IconDeleteOutline :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Remove
 			</NcActionButton>
@@ -473,7 +473,7 @@ export default {
 		<NcActions :variant="current" menu-name="Choose a variant">
 			<NcActionButton v-if="current" close-after-click @click="define()">
 				<template #icon>
-					<IconDeleteOutline :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Remove
 			</NcActionButton>
@@ -494,7 +494,7 @@ export default {
 
 			<NcActionButton v-if="current" close-after-click @click="define()">
 				<template #icon>
-					<IconDeleteOutline :size="20" />
+					<IconTrashCanOutline :size="20" />
 				</template>
 				Remove
 			</NcActionButton>
@@ -511,14 +511,14 @@ export default {
 </template>
 
 <script>
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.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: {
-		IconDeleteOutline,
+		IconTrashCanOutline,
 		IconPaletteOutline,
 		IconSelectColor,
 		IconCheckboxMarkedCircleOutline,
@@ -599,7 +599,7 @@ export default {
 				</NcActionButton>
 				<NcActionLink href="#">
 					<template #icon>
-						<IconDownloadOutline :size="20" />
+						<IconTrayArrowDown :size="20" />
 					</template>
 					Download message
 				</NcActionLink>
@@ -689,7 +689,7 @@ export default {
 				</NcActionInput>
 				<NcActionButton>
 					<template #icon>
-						<IconDeleteOutline :size="20" />
+						<IconTrashCanOutline :size="20" />
 					</template>
 					Remove group
 				</NcActionButton>
@@ -714,7 +714,7 @@ export default {
 <script>
 // Common icons
 import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
-import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 
 // Email icons
 import IconStarOutline from 'vue-material-design-icons/StarOutline.vue'
@@ -724,7 +724,7 @@ 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 IconDownloadOutline from 'vue-material-design-icons/DownloadOutline.vue'
+import IconTrayArrowDown from 'vue-material-design-icons/TrayArrowDown.vue'
 
 // Formatting icons
 import IconFormatTitle from 'vue-material-design-icons/FormatTitle.vue'
@@ -739,7 +739,7 @@ export default {
 	components: {
 		// Common icons
 		IconPencilOutline,
-		IconDeleteOutline,
+		IconTrashCanOutline,
 
 		// Email icons
 		IconStarOutline,
@@ -749,7 +749,7 @@ export default {
 		IconAlertOctagonOutline,
 		IconCheck,
 		IconOpenInNew,
-		IconDownloadOutline,
+		IconTrayArrowDown,
 
 		// Formatting icons
 		IconFormatTitle,