Unexpected behaviour when using an Icon within ClientOnly fallback

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

Start with the provided Vue reproduction using ClientOnly, its #fallback slot, Icon, and the content div with ref="someRef". Compare loading and completed rendering with and without the ref, then trace the relevant Icon and ClientOnly behavior. Done means the fallback shows a large spinner while the completed content keeps normal text sizing when the ref is present.