MToast does not support custom icon slot

[Matthew Mewton]

Bug description

Since some icons used in Website do not exist as Maker Icons, I'm attempting to use the icon slot as a way to pass my icon into MToast. However, this functionality does not appear to work, despite being mentioned. as supported in the styleguide.

I attempted this code, which did not render an icon:

<slot
    name="icon"
>
    <m-icon
        name="bag"
        size="medium"
    />
</slot>

Reproduction

Add a custom icon slot to <MToast> and see if the icon renders

Environment

Development

Addressed by

Aug 31, 2023

Can you contribute a fix?

• I’m interested in opening a pull request for this issue.

[kirill]

Note to whoever picks this ticket up (which will probably be me lol): the custom toast example in the styleguide works in maker v16.7 but not in v17.0 so the bug was likely introducing in the v17 pr. however, after looking at the pr a bit closer, i think maybe the documented toast example code for customizing icons itself might be outdated, and instead of:

const icons = {
    zap: Zap,
    close: ChevronRight,
};

it should be

const icons = {
    zap: (h) => h(Zap),
    close: (h) => h(ChevronRight),
};

however while that would fix that particular example in the docs it doesn't explain when or why the icon slot broke, or if it ever worked in the first place (since we never explicitly documented it with an example in the styleguide). Anyway, I don't suspect this will be a difficult fix, so it's easy enough for anyone to pick up.

[kirill]

@mattmewton this code

<slot
    name="icon"
>
    <m-icon
        name="bag"
        size="medium"
    />
</slot>

defines a slot, but it doesn't inject content into a slot, perhaps you meant to try:

<template #icon>
    <m-icon
        name="bag"
        size="medium"
    />
</template>

also, if you're already using MIcon, there's no need to use the slot, you can pass the name directly to MToast, e.g.

<m-toast
    :show-icon="true"
    icon-name="bag"
/>

please note that the show-icon prop must be set to true in order for the icon to be rendered. Can you try that and lemme know if it works for you?

[Matthew Mewton]

Hey @pretzelhammer thanks, the second example does seem to work for me after all. I was missing the show-icon prop.

However, the custom icon slot still does not work as expected, so I'll leave this issue open for now.

[kirill]

okay great, glad to hear that resolved the issue for you, I briefly looked into the custom icon slot not working and it didn't seem like a simple fix (even after messing around with it for an hour I couldn't figure out why it wasn't working :/) so can't give any clear timeline on when/if that will eventually be fixed