Svelte Material UI How to Click on an Icon for a Textfield?

Question

Using Svelte and Svelte Material UI, adding an on:click to an Icon that is used inside a Textfield results in nothing happening when the icon is clicked in the browser:

<script>
    import Textfield from '@smui/textfield';
    import Icon from '@smui/textfield/icon';

    let foo;
</script>

<form>

    <Textfield bind:value={foo} label="Foo">

        <Icon 
            class="material-icons" 
            slot="trailingIcon"
            on:click={
                () => {
                    console.log('bar');
                }
            }
        >
            add
        </Icon>

    </Textfield>

</form>

How can I make the icon respond to an on:click ?

---

I did try wrapping the Icon in a <div> and adding the on:click to the div. While this worked, it yields an a11y warning that require keypress code to fix. In addition, if you use a conditional logic to print the icon, you'll get poor formatting if you set slot="trailingIcon" on the Icon, or an error if you set slot="trailingIcon" on the div instead.