[REF-2716] Cannot pass an icon component to high level rx.callout icon prop

[masenf]

Describe the bug Trying to pass an rx.match icon to rx.callout and it gives an error

icon = rx.match(
    type,
    (0, rx.icon("info")),
    (1, rx.icon("triangle_alert")),
    (3, rx.icon("octagon_x")),
    rx.icon("info"),  # default
)

To Reproduce

    return rx.callout(
        message,
        icon=icon,
        size="3",
        variant="surface",
        color_scheme=color
    )

--> ValueError: Invalid icon tag: <Fragment>

Expected behavior It should render the icon as a component is given

Specifics (please complete the following information):

• Python Version: 3.11
• Reflex Version: 0.4.9
• OS:
• Browser (Optional):

Additional context https://discord.com/channels/1029853095527727165/1232526649786896414/1232526649786896414

_REF-2716

[greenseeker]

As you had suggested, I tried using the low level callout...

def render_notice(message, type) -> rx.Component:
    icon = rx.match(
        type,
        (0,rx.icon("info")),
        (1,rx.icon("triangle_alert")),
        (2,rx.icon("octagon_x")),
        rx.icon("circle_check_big")
    )

    color = rx.match(
        type,
        (0,"sky"),
        (1,"amber"),
        (2,"crimson"),
        "grass"
    )

    return rx.callout.root(
        rx.callout.text(message),
        rx.callout.icon(icon),
        size="3",
        variant="surface",
        color_scheme=color
    )

... this does display the icon, but it's not aligned properly within the callout.

[Lendemor]

The rendering inside the callout seems to be based on a grid, so if you put the callout.icon after callout.text the icon will be moved and display on the 2nd line.

Since there seems to be some internal logic to callout that force the callout.text to always be on the right column of this grid, this explain the render you saw.