fix(VDataTable): allow custom header icons (#7918)

* fix(VDataTable): allow custom header icons

fix css styling issue where internal sorting css was applied to any icon used in header

closes #7647

* test: updated snapshots

packages/vuetify/src/components/VDataTable/VDataTableHeader.sass

@@ -6,7 +6,7 @@
 +theme(v-data-table) using ($material)
   .v-data-table-header
     th.sortable
-      .v-icon
+      .v-data-table-header__icon
         color: rgba(map-get($material, 'fg-color'), map-get($material, 'disabledORhints-text-percent'))
 
       &:hover
@@ -15,7 +15,7 @@
       &.active
         color: rgba(map-get($material, 'fg-color'), map-get($material, 'primary-text-percent'))
 
-        .v-icon
+        .v-data-table-header__icon
           color: rgba(map-get($material, 'fg-color'), map-get($material, 'primary-text-percent'))
 
     &__sort-badge
@@ -30,20 +30,19 @@
       cursor: pointer
       outline: 0
 
-      .v-icon
-        display: inline-block
-        opacity: 0
-        transition: .3s map-get($transition, 'swing')
-
-    &.active
-      transform: none
-
-      .v-icon
+    &.active, &:hover
+      .v-data-table-header__icon
+        transform: none
         opacity: 1
 
-      &.desc
-        .v-icon
-          transform: rotate(-180deg)
+    &.desc
+      .v-data-table-header__icon
+        transform: rotate(-180deg)
+
+.v-data-table-header__icon
+  display: inline-block
+  opacity: 0
+  transition: .3s map-get($transition, 'swing')
 
 .v-data-table-header__sort-badge
   display: inline-flex