The 2 last snippets of code are exactly the same.

This is probably related to the fact that you need to have unique ids on your page and maybe some hydration/lifecycle hooks messed up that one.

The browser may still display it sometimes because it's clever enough. But as a whole, it doesn't sound like a Vue/Nuxt-specific issue.

Maybe Ionic is the issue here too, not sure because I do not have any experience with that one specifically. Hence I could recommend trying those icons instead and see if those battle-tested ones also have a similar issue. Idea would be to narrow down the things that doesn't work as much as possible.