Icons not showing

[larrasu]

Version

@nuxthq/ui: 2.4.0
nuxt: 3.5.3

Reproduction Link

https://stackblitz.com/edit/nuxtlabs-ui-etmq72?file=app.vue

Steps to reproduce

1. Fetch data
2. Render icons from string

What is Expected?

Icons should show since the ph icon set is installed.

What is actually happening?

Icons not showing as expected.

[benjamincanac]

Your reproduction doesn't work for me, but to achieve what you're trying to do, you should consider using nuxt-icon. Since Tailwind CSS parser can't see your icon such as i-heroicons-bell, it won't bundle it.

You can read more in the documentation: https://ui.nuxtlabs.com/getting-started/theming#icons

I've also given additional informations in this issue: #267

Feel free to reopen if you're still having an issue.

[tsurubaso]

Having the same problem.
Is it a bug?
I tried to add a dynamic keyword inside the button without success.
With or without, the icon is not shown.
The simple following is not working.
<UButton icon="i-simple-icons-alienware" dynamic size="sm" color="primary" square variant="solid" />
for i-heroicons, everything is fine.
What is the cause?
And yes I can use other libraries, yes I can twist something to make it work.
But why it is not working as advertised?

[benjamincanac]

Have you installed the @iconify-json/simple-icons collection and added it to your nuxt.config.ts in ui.icons? https://ui.nuxt.com/getting-started/theming#collections

[tsurubaso]

@benjamincanac
Sorry, late to answer, I did what You asked for and things were perfectly running.
thanks!

[albertcito]

After update to from 2.17.0 to 2.18.4 the icons are not there anymore and I'm receiving this warning.

 Missing required prop: "icon" 
  at <Index name="i-heroicons-magnifying-glass" mode=null size=null  ... > 

1. I installed @iconify-json/heroicons but still I see the issue
2. I don't know what exactly I need to add to the file nuxt.config.ts in ui.icons
   2.1 is it something like:icons: 'heroicons'? I did't but it doesn't work to me.

Can you help me please!

Solution:

I have in my component folder a component call <Icon :icon=[''] />. It override the Icon component that <UIcon> is using. I rename my component and I solved it.

[benjamincanac]

@albertcito This issue is 6 months old, please open a new one with a reproduction.

[JuanmanDev]

I found the text to use was in incorrect format, for anyone who finds this (even me in the future), change the text of icon helps:

<UButton
      block
      icon="heroicons:presentation-chart-line-solid"
      color="gray"
>