Problem with fetching icons (clientBundle)

TLDR;
I am having problem with clientBundle working out. (I need to prefetch icons and generate CSS classes for them.)

nuxt 3.16.1
@nuxt/icon 1.11.0
doing this because apexcharts icons

I am having a problem with fetching my desired icons in advance. I am gladly using <Icon> elements, but in one case I need 5 icons in "vanilla" HTML. So I am using <span class="iconify i-pack:name"</span> element.
The problem is that this way it doesn't go through the @nuxt/icon module so the class i-pack:name doesn't exist.

Temporary fix is pasting these elements before the case:

<Icon style="display: none;" name="heroicons:magnifying-glass-plus-16-solid" />
<Icon style="display: none;" name="heroicons:magnifying-glass-minus-16-solid" />
<Icon style="display: none;" name="heroicons:arrows-pointing-out-16-solid" />
<Icon style="display: none;" name="heroicons:hand-raised-16-solid" />
<Icon style="display: none;" name="heroicons:arrow-path-16-solid" />

I would love to just use clientBundle in my Nuxt config, like this:

icon: {
  serverBundle: 'remote',
  clientBundle: {
    icons: [
      'heroicons:magnifying-glass-plus-16-solid',
      'heroicons:magnifying-glass-minus-16-solid',
      'heroicons:arrows-pointing-out-16-solid',
      'heroicons:hand-raised-16-solid',
      'heroicons:arrow-path-16-solid',
    ],
    scan: false,
  }
},

and the console writes:

ℹ Nuxt Icon client bundle consist of 5 icons with 2.41KB(uncompressed) in size

but it simply doesn't work as the temprorary solution. Maybe I have misunderstood something in the readme file of @nuxt/icons but I cannot simply find it out.
Any ideas please?

Start with the Nuxt config shown in the issue and reproduce the five-icon clientBundle setup with scan disabled. Compare the bundled icons with their use in vanilla HTML via the iconify i-pack:name classes and check the @nuxt/icon README behavior. Done means the configured icons produce usable classes outside <Icon> elements, or the limitation is documented clearly.