Updating fonts

Author: webdevnerdstuff

src/plugin/composables/classes.ts

@@ -105,10 +105,11 @@ export const useHeaderCellClasses: UseHeaderCellClasses = (options) => {
 
 // ------------------------- Header Sort Icon //
 export const useSortIconClasses: UseSortIconClasses = (options) => {
-	const { key, level, sortBy } = options;
+	const { iconOptions, key, level, sortBy } = options;
 
 	return {
-		'px-1': true,
+		'fa-fw': iconOptions?.defaultSet === 'fa',
+		'mx-1': true,
 		[`${componentName}--header-row-th-sortable-sort-icon`]: true,
 		[`${componentName}--header-row-th-sortable-sort-icon-${level}`]: true,
 		[`${componentName}--header-row-th-sortable-sort-icon-desc`]: useGetSortDirection(sortBy, key) === 'desc',

src/plugin/slots/HeadersSlot.vue

@@ -58,8 +58,9 @@
 					<v-icon
 						v-else-if="column.sortable"
 						:class="sortIconClasses(column.key as keyof Column)"
+						:icon="sortAscIcon"
+						:size="iconSize"
 					>
-						mdi mdi-arrow-up
 					</v-icon>
 				</div>
 			</th>
@@ -74,6 +75,7 @@ import {
 	HeaderSlotProps,
 	InternalDataTableHeader,
 } from '@/types';
+import type { IconOptions } from 'vuetify';
 import {
 	useCellAlignClasses,
 	useHeaderCellClasses,
@@ -95,6 +97,7 @@ const props = withDefaults(defineProps<HeaderSlotProps>(), {
 	showSelect: false,
 });
 
+const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 const theme = useTheme();
 const isAllSelected = ref<boolean>(props.slotProps.allRowsSelected);
 
@@ -103,6 +106,10 @@ const columns = computed<Column[]>(() => props.slotProps.columns);
 const someSelected = computed(() => props.slotProps.someSelected);
 const isIndeterminate = computed(() => someSelected.value && !props.slotProps.allRowsSelected);
 
+// TODO: This may change if pull request is accepted //
+// ? https://github.com/vuetifyjs/vuetify/pull/17598 //
+const sortAscIcon = ref('$sortAsc');
+
 
 // -------------------------------------------------- Header Row //
 const headerRowClasses = computed<object>(() => {
@@ -159,6 +166,7 @@ const checkBoxClasses = computed<object>(() => {
 // -------------------------------------------------- Sorting //
 const sortIconClasses = (key: string): object => {
 	return useSortIconClasses({
+		iconOptions,
 		key,
 		level: props.level,
 		sortBy: props.sortBy,
@@ -172,6 +180,18 @@ function sortColumn(column: InternalDataTableHeader): void {
 }
 
 
+// -------------------------------------------------- Icons //
+const iconSize = computed(() => {
+	if (iconOptions?.defaultSet === 'fa') {
+		sortAscIcon.value = 'fas fa-arrow-up';
+		return 'small';
+	}
+
+	sortAscIcon.value = '$sortAsc';
+	return 'default';
+});
+
+
 // -------------------------------------------------- Render //
 function renderCell(column: Column): unknown {
 	return useRenderCell(column);
@@ -214,6 +234,10 @@ $hover: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 						&-desc {
 							transform: rotate(180deg);
 						}
+
+						// &-fa {
+						// 	font-size: 1rem;
+						// }
 					}
 
 					&:hover {

src/plugin/slots/ItemSlot.vue

@@ -75,9 +75,11 @@
 						v-if="$slots[`item.data-table-expand`]"
 						name="item.data-table-expand"
 					/>
-					<v-icon v-else>
-						mdi-chevron-down
-					</v-icon>
+					<v-icon
+						v-else
+						icon="$expand"
+						:size="expandIconSize"
+					/>
 				</div>
 			</td>
 			<!-- Render Cell Item -->
@@ -106,6 +108,7 @@ import {
 	useBodyRowClasses,
 	useCellClasses,
 } from '@/plugin/composables/classes';
+import type { IconOptions } from 'vuetify';
 
 
 const slots = defineSlots();
@@ -117,6 +120,8 @@ const emit = defineEmits([
 
 const props = withDefaults(defineProps<ItemSlotProps>(), {});
 
+const vuetifyIcons = inject<IconOptions>(Symbol.for('vuetify:icons'));
+
 const columns = computed<Column[]>(() => props.slotProps.columns);
 const index = computed(() => props.slotProps.index);
 const isExpanded = computed(() => props.slotProps.isExpanded);
@@ -188,6 +193,16 @@ function emitClickRowCheckbox(data: ClickRowCheckboxEvent): void {
 }
 
 
+// -------------------------------------------------- Icons //
+const expandIconSize = computed(() => {
+	if (vuetifyIcons?.defaultSet === 'fa') {
+		return 'x-small';
+	}
+
+	return 'default';
+});
+
+
 // -------------------------------------------------- Render //
 function renderCellItem(item: DataTableItem, column: Column): unknown {
 	return useRenderCellItem(item.raw as DataTableItem['raw'], column);