Binding icon with :name in <script setup> SFCs

Ionic Framework Ionic Vue
1

Hello!
I want to start by saying that I’ve learnt Vue 3 using the Composition API, and with the less verbose <script setup> tag for the JS/TS block.

Below is a basic code block that attempts to add two icons inside a Header:

<template>
  <ion-page>
    <ion-toolbar>
      <ion-buttons slot="secondary">
        <ion-button>
          <ion-icon slot="icon-only" :md="personCircle"></ion-icon>
        </ion-button>
        <ion-button>
          <ion-icon slot="icon-only" :name="search"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title>Icon Buttons</ion-title>
    </ion-toolbar>
  </ion-page>
</template>

<script setup lang="ts">
import { personCircle, search } from "ionicons/icons"
import {
  IonPage,
  IonButtons,
  IonButton,
  IonIcon,
  IonTitle,
  IonToolbar,
} from "@ionic/vue"
</script>

The problem is that the binding of the search icon via :name is not working, while the personCircle binding via :md is working.

I have reproduced this on Vivaldi and Safari, where the only way to get the icon to show is binding it with :md.
I understand that the md and ios attributes are used to provide platform-based alternatives, so it doesn’t feel right that the default name attribute is not binding the icon successfully while the alternatives are.

Is this a bug, or am I missing something?

Inspecting the icons in the browser, the personCircle has a clean outerHTML that reads
<ion-icon slot="icon-only" role="img" class="md"></ion-icon>

The invisible search icon’s outerHTML looks like this:
<ion-icon slot="icon-only" role="img" class="md" name="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Search</title><path d='M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z'/></svg>"></ion-icon>

2

in Vue (not using <script setup>) I’ve had to do the following using :icon:

<template>
    <IonIcon slot="start" :icon="shareSocialOutline" />
</template>

<script lang="ts">
import { shareSocialOutline } from 'ionicons/icons'

export default {
    setup() {
        return {
            shareSocialOutline
        }
   }
}