Unexpected behaviour when using an Icon within ClientOnly fallback

[slugcat-dev]

Consider following code for your app:

<style>
.loading {
  font-size: 2rem;
}
</style>

<template>
  <ClientOnly>
    <template #fallback>
      <div class="loading">
        <Icon name="svg-spinners:ring-resize" />
        Loading
      </div>
    </template>
    <div class="content" ref="someRef">
      This text should NOT be large!
      Remove the <pre>ref="someRef"</pre> from the parent and it works
    </div>
  </ClientOnly>
</template>

Expected behaviour when loading the page: A big loading spinner, and, when everything is done loading, some normal text, like this:

Instead, you get this:

When you remove the ref="someRef" from the content div, it works as expected

[Atinux]

Are you sure this is from Nuxt icon directly and not Nuxt itself?

[slugcat-dev]

Can't tell, but when you remove the Icon from the template, it works

[Atinux]

Could you try with <IconCSS name="svg-spinners:ring-resize" />?

[slugcat-dev]

Already tried that, it doesn't work either

[Atinux]

Can you create a reproduction with Stackblitz please?

[slugcat-dev]

https://stackblitz.com/edit/nuxt-icon-playground-ct93e9?file=app.vue