TextField and Select do not suppport conditionals around named slots for leadingIcon and trailingIcon

[morgandixon]

Describe the bug
TextField and Select components render icons incorrectly when they are wrapped in a conditional. This occurs in SMUI 3 and up.

To Reproduce

<TextField ...>
  {#if leadingIcon}
    <Icon slot="leadingIcon" ... />
  {/if}
...
</TextField>

Expected behavior
If there is a conditional wrapping a named slot, and the conditional evaluates to true, the component should render the same as if there was no conditional at all.

Screenshots
Here's an example of is what is output when leadingIcon is truthy:

I think this is because these components are using $$slots to provide class names but is not re-rendering when $$slots changes:

svelte-material-ui/packages/textfield/Textfield.svelte

Line 26 in 000375c

'mdc-text-field--with-leading-icon': $$slots.leadingIcon,

)

This looks like it's related to Svelte $$slots not updating with conditionals: sveltejs/svelte#5312

[hperrin]

This is a limitation in Svelte's slots and $$slots object. Slot values must be direct descendants of their components (they can't be in conditional blocks). Also, $$slots never changes after the initial render, so SMUI isn't updated about newly filled slots. There is a workaround however, for trailing icon. Since the style doesn't affect the label, you can wrap the conditional icon in a svelte:fragment that goes in the slot. Something like this:

<Textfield bind:value label="My Input">
    <svelte:fragment slot="trailingIcon">
      {#if !invalid}
        <Icon
          class="material-icons"
          role="button"
          on:click={clickHandler}>send</Icon
        >
      {/if}
    </svelte:fragment>
</Textfield>

But for leading icons, since the style affects the label, there's currently nothing you can do unless and until slots can be used conditionally: sveltejs/svelte#6218

I could add props for leadingIcon and trailingIcon that would override the $$slots check, then you could do that same svelte:fragment trick with leadingIcon. Would that be helpful?

[morgandixon]

Adding props for leadingIcon and trailingIcon would be helpful. Then I wouldn't need to duplicate as much code for each conditional. Thanks!