Replace filled icons with outlined versions for a modernized Tables app UI

src/modules/main/partials/ColumnTypeSelection.vue

@@ -45,11 +45,11 @@ import '@nextcloud/dialogs/style.css'
 import TextLongIcon from 'vue-material-design-icons/TextLong.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'
 import CounterIcon from 'vue-material-design-icons/Counter.vue'
-import StarIcon from 'vue-material-design-icons/Star.vue'
+import StarIcon from 'vue-material-design-icons/StarOutline.vue'
 import ProgressIcon from 'vue-material-design-icons/ArrowRightThin.vue'
 import SelectionIcon from 'vue-material-design-icons/FormSelect.vue'
 import DatetimeIcon from 'vue-material-design-icons/ClipboardTextClockOutline.vue'
-import ContactsIcon from 'vue-material-design-icons/Contacts.vue'
+import ContactsIcon from 'vue-material-design-icons/ContactsOutline.vue'
 import { NcSelect } from '@nextcloud/vue'
 
 export default {

src/modules/main/partials/editViewPartials/filter/FilterEntry.vue

@@ -43,7 +43,7 @@
 				:aria-label="t('tables', 'Delete filter')"
 				@click="$emit('delete-filter')">
 				<template #icon>
-					<Delete :size="25" />
+					<DeleteOutline :size="25" />
 				</template>
 			</NcButton>
 		</div>
@@ -52,15 +52,15 @@
 
 <script>
 import { NcButton, NcSelect } from '@nextcloud/vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import { ColumnTypes } from '../../../../../shared/components/ncTable/mixins/columnHandler.js'
 
 export default {
 
 	components: {
 		NcSelect,
 		NcButton,
-		Delete,
+		DeleteOutline,
 	},
 
 	props: {

src/modules/main/partials/editViewPartials/sort/SortEntry.vue

@@ -43,15 +43,15 @@
 			class="delete-button"
 			@click="$emit('delete-sorting-rule')">
 			<template #icon>
-				<Delete :size="25" />
+				<DeleteOutline :size="25" />
 			</template>
 		</NcButton>
 	</div>
 </template>
 
 <script>
 import { NcButton, NcSelect, NcCheckboxRadioSwitch } from '@nextcloud/vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import SortAsc from 'vue-material-design-icons/SortAscending.vue'
 import SortDesc from 'vue-material-design-icons/SortDescending.vue'
 
@@ -60,7 +60,7 @@ export default {
 	components: {
 		NcSelect,
 		NcButton,
-		Delete,
+		DeleteOutline,
 		NcCheckboxRadioSwitch,
 		SortAsc,
 		SortDesc,

src/modules/main/sections/Dashboard.vue

@@ -89,7 +89,7 @@
 										:close-after-click="true"
 										@click="emit('tables:view:delete', view)">
 										<template #icon>
-											<Delete :size="20" />
+											<DeleteOutline :size="20" />
 										</template>
 										{{ t('tables', 'Delete view') }}
 									</NcActionButton>
@@ -119,7 +119,7 @@ import { mapState, mapActions } from 'pinia'
 import { useTablesStore } from '../../../store/store.js'
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
 import PlaylistPlus from 'vue-material-design-icons/PlaylistPlus.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import Moment from '@nextcloud/moment'
 import Connection from 'vue-material-design-icons/Connection.vue'
 import axios from '@nextcloud/axios'
@@ -140,7 +140,7 @@ export default {
 		NcAvatar,
 		PlaylistPlus,
 		PlaylistEditIcon,
-		Delete,
+		DeleteOutline,
 	},
 
 	filters: {

src/modules/navigation/partials/NavigationContextItem.vue

@@ -24,14 +24,14 @@
 			</NcActionButton>
 			<NcActionButton v-if="ownsContext(context)" :close-after-click="true" @click="transferContext">
 				<template #icon>
-					<FileSwap :size="20" />
+					<FileSwapOutline :size="20" />
 				</template>
 				{{ t('tables', 'Transfer application') }}
 			</NcActionButton>
 			<NcActionButton v-if="ownsContext(context)" :close-after-click="true" data-cy="navigationContextDeleteBtn"
 				@click="deleteContext">
 				<template #icon>
-					<Delete :size="20" />
+					<DeleteOutline :size="20" />
 				</template>
 				{{ t('tables', 'Delete application') }}
 			</NcActionButton>
@@ -48,8 +48,8 @@ import { mapState, mapActions } from 'pinia'
 import TableIcon from 'vue-material-design-icons/Table.vue'
 import { emit } from '@nextcloud/event-bus'
 import PlaylistEdit from 'vue-material-design-icons/PlaylistEdit.vue'
-import FileSwap from 'vue-material-design-icons/FileSwap.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import FileSwapOutline from 'vue-material-design-icons/FileSwapOutline.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
 import svgHelper from '../../../shared/components/ncIconPicker/mixins/svgHelper.js'
 import { NAV_ENTRY_MODE } from '../../../shared/constants.ts'
@@ -61,9 +61,9 @@ export default {
 
 	components: {
 		PlaylistEdit,
-		FileSwap,
+		FileSwapOutline,
 		TableIcon,
-		Delete,
+		DeleteOutline,
 		NcIconSvgWrapper,
 		NcAppNavigationItem,
 		NcActionButton,

src/modules/navigation/partials/NavigationTableItem.vue

@@ -130,10 +130,12 @@
 
 			<!-- DELETE -->
 			<NcActionButton v-if="canManageElement(table)"
-				icon="icon-delete"
 				:close-after-click="true"
 				@click="deleteTable()">
 				{{ t('tables', 'Delete table') }}
+				<template #icon>
+					<DeleteOutline :size="20" />
+				</template>
 			</NcActionButton>
 		</template>
 		<ul>
@@ -156,6 +158,7 @@ import Star from 'vue-material-design-icons/Star.vue'
 import StarOutline from 'vue-material-design-icons/StarOutline.vue'
 import ArchiveArrowDown from 'vue-material-design-icons/ArchiveArrowDown.vue'
 import ArchiveArrowUpOutline from 'vue-material-design-icons/ArchiveArrowUpOutline.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
 import { getCurrentUser, getRequestToken } from '@nextcloud/auth'
 import Connection from 'vue-material-design-icons/Connection.vue'
@@ -183,6 +186,7 @@ export default {
 		NcAvatar,
 		Connection,
 		PlaylistPlus,
+		DeleteOutline,
 	},
 
 	filters: {

src/modules/navigation/partials/NavigationViewItem.vue

@@ -97,10 +97,12 @@
 
 			<!-- DELETE -->
 			<NcActionButton v-if="canManageElement(view)"
-				icon="icon-delete"
 				:close-after-click="true"
 				@click="emit('tables:view:delete', view)">
 				{{ t('tables', 'Delete view') }}
+				<template #icon>
+					<DeleteOutline :size="20" />
+				</template>
 			</NcActionButton>
 		</template>
 	</NcAppNavigationItem>
@@ -115,6 +117,7 @@ import { showError } from '@nextcloud/dialogs'
 import Table from 'vue-material-design-icons/Table.vue'
 import Star from 'vue-material-design-icons/Star.vue'
 import StarOutline from 'vue-material-design-icons/StarOutline.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
 import Connection from 'vue-material-design-icons/Connection.vue'
 import PlaylistPlay from 'vue-material-design-icons/PlaylistPlay.vue'
@@ -138,6 +141,7 @@ export default {
 		NcAvatar,
 		PlaylistPlay,
 		Import,
+		DeleteOutline,
 	},
 
 	filters: {

src/modules/navigation/sections/Navigation.vue

@@ -47,7 +47,7 @@
 				<NcAppNavigationItem v-if="getArchivedTables.length > 0" :name="t('tables', 'Archived tables')"
 					:allow-collapse="true" :open="false">
 					<template #icon>
-						<Archive :size="20" />
+						<ArchiveOutline :size="20" />
 					</template>
 
 					<template #counter>
@@ -108,7 +108,7 @@ import NavigationContextItem from '../partials/NavigationContextItem.vue'
 import { useTablesStore } from '../../../store/store.js'
 import { emit, subscribe } from '@nextcloud/event-bus'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
-import Archive from 'vue-material-design-icons/Archive.vue'
+import ArchiveOutline from 'vue-material-design-icons/ArchiveOutline.vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import { mapState, mapActions } from 'pinia'
@@ -125,7 +125,7 @@ export default {
 		NcActionButton,
 		NcTextField,
 		Magnify,
-		Archive,
+		ArchiveOutline,
 		NcButton,
 		NcCounterBubble,
 		NcEmptyContent,

src/shared/components/ncTable/partials/TableHeaderColumnOptions.vue

@@ -79,7 +79,7 @@
 					:title="selectedOperator.label"
 					@click="selectOperator = true">
 					<template #icon>
-						<FilterCog :size="25" />
+						<FilterCogOutline :size="25" />
 					</template>
 					{{ t('tables', 'Select Operator') }}
 				</NcActionButton>
@@ -98,22 +98,22 @@
 						:aria-label="t('tables', 'Hide column')"
 						@click="hideColumn()">
 						<template #icon>
-							<EyeOff :size="25" />
+							<EyeOffOutline :size="25" />
 						</template>
 					</NcActionButton>
 					<NcActionButton v-if="showEditColumn"
 						:aria-label="t('tables', 'Edit column')"
 						@click="editColumn()">
 						<template #icon>
-							<Pencil :size="25" />
+							<PencilOutline :size="25" />
 						</template>
 					</NcActionButton>
 					<NcActionButton v-if="showDeleteColumn"
 						:aria-label="t('tables', 'Delete column')"
 						data-cy="deleteColumnActionBtn"
 						@click="deleteColumn()">
 						<template #icon>
-							<Delete :size="25" />
+							<DeleteOutline :size="25" />
 						</template>
 					</NcActionButton>
 				</NcActionButtonGroup>
@@ -126,11 +126,11 @@
 import generalHelper from '../../../mixins/generalHelper.js'
 import SortAsc from 'vue-material-design-icons/SortAscending.vue'
 import SortDesc from 'vue-material-design-icons/SortDescending.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
-import EyeOff from 'vue-material-design-icons/EyeOff.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import EyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
-import FilterCog from 'vue-material-design-icons/FilterCog.vue'
+import FilterCogOutline from 'vue-material-design-icons/FilterCogOutline.vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import {
 	NcActionButton,
@@ -146,11 +146,11 @@ import { translate as t } from '@nextcloud/l10n'
 
 export default {
 	components: {
-		EyeOff,
-		Delete,
-		Pencil,
+		EyeOffOutline,
+		DeleteOutline,
+		PencilOutline,
 		ChevronLeft,
-		FilterCog,
+		FilterCogOutline,
 		Magnify,
 		NcActionInput,
 		NcActionRadio,

src/shared/components/ncTable/partials/TableRow.vue

@@ -21,7 +21,7 @@
 		<td v-if="config.showActions" :class="{sticky: config.showActions}">
 			<NcButton v-if="config.canEditRows || config.canDeleteRows" type="primary" :aria-label="t('tables', 'Edit row')" data-cy="editRowBtn" @click="$emit('edit-row', row.id)">
 				<template #icon>
-					<Pencil :size="20" />
+					<PencilOutline :size="20" />
 				</template>
 			</NcButton>
 		</td>
@@ -31,6 +31,7 @@
 <script>
 import { NcCheckboxRadioSwitch, NcButton } from '@nextcloud/vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import TableCellHtml from './TableCellHtml.vue'
 import TableCellProgress from './TableCellProgress.vue'
 import TableCellLink from './TableCellLink.vue'
@@ -60,6 +61,7 @@ export default {
 		TableCellHtml,
 		NcButton,
 		Pencil,
+		PencilOutline,
 		NcCheckboxRadioSwitch,
 		TableCellDateTime,
 		TableCellTextLine,