feat: added ability to remove switch icons

Author: hperrin

packages/site/src/routes/demo/switch/_NoIcons.svelte

@@ -0,0 +1,25 @@
+<div>
+  <FormField>
+    <Switch bind:checked={checked1} icons={false} />
+    <span slot="label">Fields of grain.</span>
+  </FormField>
+</div>
+
+<pre class="status">Checked: {checked1}</pre>
+
+<div style="margin-top: 1em;">
+  <FormField>
+    <Switch bind:checked={checked2} color="secondary" icons={false} />
+    <span slot="label">Fields of grain.</span>
+  </FormField>
+</div>
+
+<pre class="status">Checked: {checked2}</pre>
+
+<script lang="ts">
+  import Switch from '@smui/switch';
+  import FormField from '@smui/form-field';
+
+  let checked1 = false;
+  let checked2 = false;
+</script>

packages/site/src/routes/demo/switch/index.svelte

@@ -14,6 +14,8 @@
   </Demo>
 
   <Demo component={Group} file="switch/_Group.svelte">Group switch</Demo>
+
+  <Demo component={NoIcons} file="switch/_NoIcons.svelte">No icons</Demo>
 </section>
 
 <script lang="ts">
@@ -22,4 +24,5 @@
   import Simple from './_Simple.svelte';
   import SecondaryColor from './_SecondaryColor.svelte';
   import Group from './_Group.svelte';
+  import NoIcons from './_NoIcons.svelte';
 </script>

packages/switch/Switch.svelte

@@ -36,23 +36,31 @@
         <div class="mdc-elevation-overlay" />
       </div>
       <div class="mdc-switch__ripple" bind:this={rippleElement} />
-      <div
-        use:useActions={icons$use}
-        class={classMap({
-          [icons$class]: true,
-          'mdc-switch__icons': true,
-        })}
-        {...prefixFilter($$restProps, 'icons$')}
-      >
-        <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
-          <path
-            d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z"
-          />
-        </svg>
-        <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
-          <path d="M20 13H4v-2h16v2z" />
-        </svg>
-      </div>
+      {#if icons}
+        <div
+          use:useActions={icons$use}
+          class={classMap({
+            [icons$class]: true,
+            'mdc-switch__icons': true,
+          })}
+          {...prefixFilter($$restProps, 'icons$')}
+        >
+          <svg
+            class="mdc-switch__icon mdc-switch__icon--on"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z"
+            />
+          </svg>
+          <svg
+            class="mdc-switch__icon mdc-switch__icon--off"
+            viewBox="0 0 24 24"
+          >
+            <path d="M20 13H4v-2h16v2z" />
+          </svg>
+        </div>
+      {/if}
     </div>
   </div>
 </button>
@@ -95,6 +103,7 @@
   export let value: any = null;
   /** This currently does nothing. */
   export let processing = false;
+  export let icons = true;
   export let icons$use: ActionArray = [];
   export let icons$class = '';
 

packages/switch/Switch.types.ts

@@ -17,6 +17,7 @@ export declare class SwitchComponentDev extends Component {
     | 'checked'
     | 'value'
     | 'processing'
+    | 'icons'
   > & {
     [k in keyof Partial<
       svelte.JSX.HTMLAttributes<HTMLDivElement>