Unable to use as dynamic element

[binaryben]

I'm trying to allow an icon to be inserted into another component via a prop.

This is the (simplified) component:

<template>
  <template v-if="icon">
    <component :is="icon" />
  </template>
  <input />
</template>

<script setup lang="ts">
  defineProps<{
    icon?: string
    placeholder?: string
  }>()
</script>

And elsewhere I am doing this:

<Input icon="i-mdi-search" />
<i-mdi-search />

This results in the following DOM:

<i-mdi-search></i-mdi-search>
<input>
<svg>
    <!-- Icon inserted correctly -->
</svg>

Is there a way to make the icon work with the <component :is= ... feature of Vue? Alternatively, could a generic icon component be provided as part of the extension itself that uses a prop?

[antfu]

#5 (comment)