Elements
Icon
Display any icon (100,000+) from Iconify.
Usage
Use the name prop by following this pattern: i-{collection_name}-{icon_name}. You can search any icon from Iconify using https://icones.js.org.
<UIcon name="i-heroicons-light-bulb" />
You won't be able to use any icon in the
name prop here as icons are bundled using egoist/tailwindcss-icons, read more about this in Theming.Dynamic New
You can use the dynamic prop to enable dynamic icon loading. This will use nuxt-icon instead and allow you to use any icon from Iconify as well as the {collection_name}:{icon_name} pattern.
This can be quite useful when using dynamic class names or for icons that are not bundled by default (fetched from a database for example).
<UIcon name="i-ph-rocket-launch" dynamic />
You can also change the default behavior of the dynamic prop by setting the ui.icons.dynamic option in your app.config.ts.
app.config.ts
export default defineAppConfig({
ui: {
icons: {
dynamic: true
}
}
})
Props
namerequired
string
dynamic
boolean
false