[ic-side-navigation] Icons only appear after expanding and collapsing again

[GCHQ-Developer-530]

Summary of the bug

When creating a nextJS application and adding an IcSideNavigation, the icons for navigation items only appear after opening and closing the side nav once. This occurs every time you refresh the page.

🪜 How to reproduce

Tell us the steps to reproduce the problem:

1. Create a nextJS app
2. Add an IcSideNavigation to a file
3. Bring the exported side nav into the app.tsx file inside of a SessionProvider
4. Run your app
5. See the error

📸 Screenshots or code

https://github.com/mi6/ic-ui-kit/assets/111882034/60a20ab0-a5a1-4f18-a489-a8702a8c2dc0

🧐 Expected behaviour

Icons should load first time and shouldn't require extra clicks to be visible.

Additional info

I can provide code for this internally if you can't recreate it. It also happens if side nav is just put directly into the app.tsx file, it's not specific to being in a separate file

[MI6-255]

Consider if this can be replicated in Next.js Storybook, if not, why?

[GCHQ-Developer-530]

We've had another similar issue crop up: The ICDS side navigation component is being used in a Next.js and TypeScript app, due to this it's using the SlottedSVG tags to hold MDI icons (with 'slot', 'viewBox' and 'path' props).

Everything seems to be fine when running the app (although there is one warning: Warning: Extra attributes from the server: class) but randomly the icons in the side nav will just not be visible. You can still click on them and it will take you to the correct page but they just don't always display. Sometimes they show, sometimes they don't. Can't seem to replicate it consistently and there's no further console errors.