Пользовательский интерфейс Svelte Material Как щелкнуть значок текстового поля?

Question

Использование Svelte и пользовательского интерфейса Svelte Material, добавление элемента , который используется внутриTextfieldв результате ничего не происходит при нажатии на значок в браузере:

      <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>

Как я могу заставить значок реагировать на ?

---

Я попробовал обернуть значок в<div>и добавлениеon:clickв див. Хотя это сработало, выдается предупреждение a11y, для исправления которого требуется код нажатия клавиши. Кроме того, если вы используете условную логику для печати значка, вы получите плохое форматирование, если установитеIcon, или ошибка, если вы установитеslot="trailingIcon"наdivвместо.