Accordion Icons before Header text

[hectordufau]

I tried to insert an icon component before Header or AccordionHeader title text, without success. In some cases, the icon shows misaligned or text disappear

I want to put an icon before title text, like "slot=leadingIcon", aligned and showing title text.

[hectordufau]

Sample, receiving menu data from json:

<Accordion>
{#each menus as menu}
    {#if (menu.idperfil == idperfil) || (menu.idperfil == 0)}
        {#if menu.submenus.length > 0}
            <Panel color="primary">
                <AccordionHeader>
                    <Icon class="material-icons">{menu.icon}</Icon>
                    {menu.title}
                    <IconButton slot="icon" toggle>
                        <Icon class="material-icons" on>expand_less</Icon>
                        <Icon class="material-icons">expand_more</Icon>
                    </IconButton>
                </AccordionHeader>
                {#each menu.submenus as submenu}
                    <AccordionContent style="background-color:white;">
                        <Icon class="material-icons">{submenu.icon}</Icon>
                        <a href={submenu.url}>{submenu.title}</a>
                    </AccordionContent>
                {/each}
            </Panel>
        {:else}
            <Panel color="primary" nonInteractive>
                <Header ripple={false}>
                    <Icon class="material-icons">{menu.icon}</Icon>
                    <a href={menu.url} style="color:white">{menu.title}</a>
                </Header>
            </Panel>
        {/if}
    {/if}
{/each}
</Accordion>