From 2019ed954c6ce23330e4010ea5dd5e2e0fe8760e Mon Sep 17 00:00:00 2001
From: Enjeck C <patrathewhiz@gmail.com>
Date: Sun, 21 Jun 2026 12:34:30 +0100
Subject: [PATCH] fix: Replace icon attributes with template slots

fix: Replace icon attributes with template slots

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>

[skip ci]
---
 src/components/cards/CardMenuEntries.vue      | 20 +++++--
 .../navigation/AppNavigationBoard.vue         | 60 +++++++++++++------
 2 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/src/components/cards/CardMenuEntries.vue b/src/components/cards/CardMenuEntries.vue
index 74d704cc9d..42967e21e7 100644
--- a/src/components/cards/CardMenuEntries.vue
+++ b/src/components/cards/CardMenuEntries.vue
@@ -16,27 +16,35 @@
 			{{ t('deck', 'Edit title') }}
 		</NcActionButton>
 		<NcActionButton v-if="canEdit && !isCurrentUserAssigned"
-			icon="icon-user"
 			:close-after-click="true"
 			@click="assignCardToMe()">
+			<template #icon>
+				<AccountPlusIcon :size="20" decorative />
+			</template>
 			{{ t('deck', 'Assign to me') }}
 		</NcActionButton>
 		<NcActionButton v-if="canEdit && isCurrentUserAssigned"
-			icon="icon-user"
 			:close-after-click="true"
 			@click="unassignCardFromMe()">
+			<template #icon>
+				<AccountMinusIcon :size="20" decorative />
+			</template>
 			{{ t('deck', 'Unassign myself') }}
 		</NcActionButton>
 		<NcActionButton v-if="canEdit"
-			icon="icon-checkmark"
 			:close-after-click="true"
 			@click="changeCardDoneStatus()">
+			<template #icon>
+				<CheckIcon :size="20" decorative />
+			</template>
 			{{ card.done ? t('deck', 'Mark as not done') : t('deck', 'Mark as done') }}
 		</NcActionButton>
 		<NcActionButton v-if="canEdit"
-			icon="icon-external"
 			:close-after-click="true"
 			@click="openCardMoveDialog">
+			<template #icon>
+				<OpenInNewIcon :size="20" decorative />
+			</template>
 			{{ t('deck', 'Move/copy card') }}
 		</NcActionButton>
 		<NcActionButton v-for="action in cardActions"
@@ -53,9 +61,11 @@
 			{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
 		</NcActionButton>
 		<NcActionButton v-if="canEdit"
-			icon="icon-delete"
 			:close-after-click="true"
 			@click="deleteCard()">
+			<template #icon>
+				<DeleteIcon :size="20" decorative />
+			</template>
 			{{ t('deck', 'Delete card') }}
 		</NcActionButton>
 	</div>
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 4c02e3cf62..52db1e1e12 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -28,15 +28,19 @@
 
 			<template v-if="!deleted" slot="actions">
 				<template v-if="!isDueSubmenuActive">
-					<NcActionButton icon="icon-info"
-						:close-after-click="true"
+					<NcActionButton :close-after-click="true"
 						@click="actionDetails">
+						<template #icon>
+							<InformationOutlineIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'Board details') }}
 					</NcActionButton>
 					<NcActionButton v-if="canManage && !board.archived"
-						icon="icon-rename"
 						:close-after-click="true"
 						@click="actionEdit">
+						<template #icon>
+							<PencilIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'Edit board') }}
 					</NcActionButton>
 					<NcActionButton v-if="canCreate && !board.archived"
@@ -64,9 +68,11 @@
 						{{ t('deck', 'Archive board') }}
 					</NcActionButton>
 					<NcActionButton v-if="canManage && !board.archived"
-						icon="icon-download"
 						:close-after-click="true"
 						@click="actionExport">
+						<template #icon>
+							<DownloadIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'Export board') }}
 					</NcActionButton>
 					<NcActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
@@ -76,50 +82,62 @@
 
 				<!-- Due date reminder settings -->
 				<template v-if="isDueSubmenuActive">
-					<NcActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
-						:disabled="updateDueSetting"
+					<NcActionButton :disabled="updateDueSetting"
 						@click="isDueSubmenuActive=false">
+						<template #icon>
+							<NcLoadingIcon v-if="updateDueSetting" :size="20" />
+							<ChevronLeftIcon v-else :size="20" decorative />
+						</template>
 						{{ t('deck', 'Due date reminders') }}
 					</NcActionButton>
 
 					<NcActionButton name="notification"
-						icon="icon-sound"
 						:disabled="updateDueSetting"
 						:class="{ 'forced-active': board.settings['notify-due'] === 'all' }"
 						@click="updateSetting('notify-due', 'all')">
+						<template #icon>
+							<BellOutlineIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'All cards') }}
 					</NcActionButton>
 					<NcActionButton name="notification"
-						icon="icon-user"
 						:disabled="updateDueSetting"
 						:class="{ 'forced-active': board.settings['notify-due'] === 'assigned' }"
 						@click="updateSetting('notify-due', 'assigned')">
+						<template #icon>
+							<AccountIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'Assigned cards') }}
 					</NcActionButton>
 					<NcActionButton name="notification"
-						icon="icon-sound-off"
 						:disabled="updateDueSetting"
 						:class="{ 'forced-active': board.settings['notify-due'] === 'off' }"
 						@click="updateSetting('notify-due', 'off')">
+						<template #icon>
+							<BellOffOutlineIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'No notifications') }}
 					</NcActionButton>
 				</template>
 				<NcActionButton v-else-if="!board.archived && board.acl.length > 0"
 					:name="t('deck', 'Due date reminders')"
-					:icon="dueDateReminderIcon"
 					@click="isDueSubmenuActive=true">
+					<template #icon>
+						<component :is="dueDateReminderIcon" :size="20" decorative />
+					</template>
 					{{ dueDateReminderText }}
 				</NcActionButton>
 
 				<NcActionButton v-if="canManage && !isDueSubmenuActive"
-					icon="icon-delete"
 					:close-after-click="true"
 					@click="actionDelete">
+					<template #icon>
+						<DeleteIcon :size="20" decorative />
+					</template>
 					{{ t('deck', 'Delete board') }}
 				</NcActionButton>
 
 				<NcActionButton v-if="canLeave && !isDueSubmenuActive"
-					icon="icon-delete"
 					:close-after-click="true"
 					@click="actionLeave">
 					<template #icon>
@@ -164,7 +182,7 @@
 </template>
 
 <script>
-import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton } from '@nextcloud/vue'
+import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton, NcLoadingIcon } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CloneIcon from 'vue-material-design-icons/ContentDuplicate.vue'
@@ -193,12 +211,20 @@ export default {
 		NcButton,
 		NcTextField,
 		NcActionButton,
+		NcLoadingIcon,
 		AccountIcon,
 		ArchiveIcon,
 		CloneIcon,
 		CloseIcon,
 		CheckIcon,
 		LeaveIcon,
+		InformationOutlineIcon,
+		PencilIcon,
+		DownloadIcon,
+		DeleteIcon,
+		ChevronLeftIcon,
+		BellOutlineIcon,
+		BellOffOutlineIcon,
 		BoardCloneModal,
 		BoardExportModal,
 	},
@@ -257,13 +283,13 @@ export default {
 		},
 		dueDateReminderIcon() {
 			if (this.board.settings['notify-due'] === 'all') {
-				return 'icon-sound'
+				return 'BellOutlineIcon'
 			} else if (this.board.settings['notify-due'] === 'assigned') {
-				return 'icon-user'
+				return 'AccountIcon'
 			} else if (this.board.settings['notify-due'] === 'off') {
-				return 'icon-sound-off'
+				return 'BellOffOutlineIcon'
 			}
-			return ''
+			return 'BellOutlineIcon'
 		},
 		dueDateReminderText() {
 			if (this.board.settings['notify-due'] === 'all') {