Change icons for shown fields in table

app/components/form/checkbox.hbs

@@ -1,8 +1,14 @@
-<label class="flex items-center cursor-pointer" {{on "click" this.onChange}} ...attributes>
-  {{#if @checked}}
-    <Icons::CheckboxOutline @size={{22}} class="mr-1"/>
-  {{else}}
-    <Icons::CheckboxBlankOutline @size={{22}} class="mr-1"/>
-  {{/if}}
+<label
+  class='flex items-center cursor-pointer'
+  {{on 'click' this.onChange}}
+  ...attributes
+>
+  {{#let (if @label 'mr-1') 22 as |class size|}}
+    {{#if @checked}}
+      <this.checkedIcon @size={{size}} class="{{class}} {{@iconClass}}" />
+    {{else}}
+      <this.uncheckedIcon @size={{size}} class="{{class}} {{@iconClass}}" />
+    {{/if}}
+  {{/let}}
   {{@label}}
 </label>

app/components/form/checkbox.js

@@ -1,7 +1,16 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { CheckboxOutline, CheckboxBlankOutline } from 'ember-mdi';
 
 export default class FormCheckboxComponent extends Component {
+  get checkedIcon() {
+    return this.args.checkedIcon ?? CheckboxOutline;
+  }
+
+  get uncheckedIcon() {
+    return this.args.uncheckedIcon ?? CheckboxBlankOutline;
+  }
+
   @action
   onChange() {
     if (this.args.onChange) {

app/components/form/table-settings.hbs

@@ -22,13 +22,18 @@
           class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
           {{sortable-item model=item}}
         >
-          <Icons::DragVertical {{sortable-handle}} class='mr-2 cursor-move' />
+          <Icons::DragVertical {{sortable-handle}} class='mr-2 fill-base-3 cursor-move' />
+          <span class="whitespace-nowrap mr-3">
+            {{namelize item}}
+          </span>
           {{! @ts-ignore }}
           <Form::Checkbox
             @checked={{this.args.isItemChecked item}}
-            @label={{namelize item}}
             @onChange={{fn @onToggleItem item}}
-            class='w-full whitespace-nowrap'
+            @checkedIcon={{this.checkedIcon}}
+            @uncheckedIcon={{this.uncheckedIcon}}
+            @iconClass='fill-base-3'
+            class='ml-auto'
           />
         </div>
       {{/each}}

app/components/form/table-settings.js

@@ -1,7 +1,11 @@
 import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
+import { EyeOutline, EyeOffOutline } from 'ember-mdi';
 
 export default class FormTableSettingsComponent extends Component {
+  checkedIcon = EyeOutline;
+  uncheckedIcon = EyeOffOutline;
+
   get guid() {
     return guidFor(this);
   }