Use an MD icon for the clear button

netbox/project-static/src/select/config.ts

@@ -0,0 +1,10 @@
+export const config = {
+
+      // Provides the "clear" button on the widget
+      plugins: {
+        'clear_button': {
+          'html': (data: Dict) => `<i class="mdi mdi-close-circle ${data.className}" title="${data.title}"></i>`
+        }
+      },
+
+}

netbox/project-static/src/select/dynamic.ts

@@ -1,6 +1,7 @@
 import { TomOption } from 'tom-select/src/types';
 import { escape_html } from 'tom-select/src/utils';
 import { DynamicTomSelect } from './classes/dynamicTomSelect';
+import { config } from './config'
 import { getElements } from '../util';
 
 const VALUE_FIELD = 'id';
@@ -21,13 +22,11 @@ function renderOption(data: TomOption, escape: typeof escape_html) {
 export function initDynamicSelects(): void {
   for (const select of getElements<HTMLSelectElement>('select.api-select')) {
     new DynamicTomSelect(select, {
+      ...config,
       valueField: VALUE_FIELD,
       labelField: LABEL_FIELD,
       maxOptions: MAX_OPTIONS,
 
-      // Provides the "clear" button on the widget
-      plugins: ['clear_button'],
-
       // Disable local search (search is performed on the backend)
       searchField: [],
 

netbox/project-static/src/select/static.ts

@@ -1,6 +1,7 @@
 import { TomOption } from 'tom-select/src/types';
 import TomSelect from 'tom-select';
 import { escape_html } from 'tom-select/src/utils';
+import { config } from './config'
 import { getElements } from '../util';
 
 // Initialize <select> elements with statically-defined options
@@ -9,7 +10,7 @@ export function initStaticSelects(): void {
     'select:not(.api-select):not(.color-select)',
   )) {
     new TomSelect(select, {
-      plugins: ['clear_button'],
+      ...config,
     });
   }
 }
@@ -18,6 +19,7 @@ export function initStaticSelects(): void {
 export function initColorSelects(): void {
   for (const select of getElements<HTMLSelectElement>('select.color-select')) {
     new TomSelect(select, {
+      ...config,
       render: {
         option: function (item: TomOption, escape: typeof escape_html) {
           return `<div style="background-color: #${escape(item.value)}">${escape(item.text)}</div>`;