IcSideNavigation hides SlottedSVG for the app title when it is wrapped in a tag

[c6461]

Summary of the bug

When using the IcSideNavigation component, the SlottedSVG icon for the application title does not get rendered when it is wrapped in a Next.js Link tag or any other tags such as span and div.

The aim was to use the Next.js Link tag for performance over the href property on IcSideNavigation.

📸 Screenshots or code

Below example code wraps the application title icon in a span tag which inadvertantly hides the icon on render. No href property is used on the IcSideNavigation component.

<IcSideNavigation appTitle="My App" version="v0.0.1" status="Alpha">
    <span>
        <SlottedSVG slot="app-icon" path={mdiCardAccountMail} viewBox="0 0 24 24" />
    <span>
    ...
    <IcNavigationItem>...</IcNavigationItem>
</IcSideNavigation>

🧐 Expected behaviour

To be able to wrap the IcSideNavigation application title and icon in a tag and render both icon and the label.

This would allow for the Next.js link tag to be used and render both the icon and label as one clickable link.

 <IcSideNavigation appTitle="My App" version="v0.0.1" status="Alpha">
    <Link>
        <SlottedSVG slot="app-icon" path={mdiCardAccountMail} viewBox="0 0 24 24" />
         My App
    <Link>
    ...
    <IcNavigationItem>...</IcNavigationItem>
</IcSideNavigation>

[github-actions[bot]]

Welcome 👋

Welcome to the ic-design-system repo, thank you for raising an issue!

How to contribute

Please read our CONTRIBUTING.md, which explains our ways of working and guidelines for contributions.

Code of Conduct

We'd appreciate it if you could read and abide by our Code of Conduct, as we wish to foster an inclusive and respectful community.

[GCHQ-Developer-112]

Hi @c6461, at first glance, this appears to be an issue because the slot name is on the <SlottedSVG> as opposed to the link. Have you tried changing <Link> to <Link slot="app-icon">. Here are some example of how to use routing with slots: How to use routing in the top navigation slots [How to use routing in the side navigation slots](How to use routing in the top navigation slots)

[c6461]

Hi @GCHQ-Developer-112 thanks for replying, this is a good suggestion! Unfortunately it still hides the SlottedSVG icon, however if I use the Icon component from the @mdi\react package the icon will render. Given that the appTitle property on IcSideNavigation is required and can't be empty it renders the application title this using href property or defaults to domain as the home page so I feel there's very little control over this.

The closest I could get to something working:

<IcSideNavigation appTitle="My App" version="v0.0.1" status="Alpha" href="/about1">
    <Link href="/about2" slot="app-icon">
        <Icon path={mdiCardAccount} size={1} />
    </Link>
    ...
    <IcNavigationItem>...</icNavigationItem>
</IcSideNavigation>

This results in the application title linking to /about1 and the icon to /about2

Ideally I'd like to get both the icon and application label to be sitting in the <Link> tag to gain the most benefit.

[MI6-255]

Linked https://github.com/mi6/ic-ui-kit/issues/1814

[MI6-255]

Action for this issue is to make guidance on how to add icons when using 3rd party routing. First testing if it works