Change filter input clear icon to differentiate from failed task icon

Author: MetRonnie

src/components/cylc/TaskFilter.vue

@@ -27,14 +27,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-text-field
         data-cy="filter-task-name"
         clearable
+        :clear-icon="$options.icons.mdiClose"
         dense
         flat
         hide-details
         outlined
         placeholder="Filter by task name"
         v-model="localValue.name"
         ref="filterNameInput"
-      ></v-text-field>
+      />
     </v-col>
     <v-col
       cols="12"
@@ -45,6 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-cy="filter-task-states"
         :items="allStates"
         clearable
+        :clear-icon="$options.icons.mdiClose"
         dense
         flat
         hide-details
@@ -76,6 +78,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import Task from '@/components/cylc/Task'
 import { TaskStateUserOrder } from '@/model/TaskState.model'
+import { mdiClose } from '@mdi/js'
 
 export default {
   name: 'TaskFilter',
@@ -101,6 +104,10 @@ export default {
         this.$emit('input', value)
       }
     }
+  },
+  // Misc options
+  icons: {
+    mdiClose
   }
 }
 </script>

src/components/cylc/gscan/GScan.vue

@@ -28,6 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-text-field
           v-model="searchWorkflows"
           clearable
+          :clear-icon="$options.icons.mdiClose"
           flat
           dense
           hide-details
@@ -52,7 +53,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               id="c-gscan-filter-tooltip-btn"
               @click="showFilterTooltip = !showFilterTooltip"
             >
-              <v-icon>{{ svgPaths.filter }}</v-icon>
+              <v-icon>{{ $options.icons.mdiFilter }}</v-icon>
             </v-btn>
           </template>
           <!-- filters tooltip -->
@@ -200,7 +201,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { mdiFilter } from '@mdi/js'
+import { mdiClose, mdiFilter } from '@mdi/js'
 import uniq from 'lodash/uniq'
 import TaskState from '@/model/TaskState.model'
 import { WorkflowState } from '@/model/WorkflowState.model'
@@ -233,9 +234,6 @@ export default {
   data () {
     return {
       maximumTasksDisplayed: 5,
-      svgPaths: {
-        filter: mdiFilter
-      },
       /**
        * The filtered workflows. This is the result of applying the filters
        * on the workflows prop.
@@ -470,6 +468,12 @@ export default {
         return validValues.includes(entry[0])
       })
     }
+  },
+
+  // Misc options
+  icons: {
+    mdiClose,
+    mdiFilter
   }
 }
 </script>