Components
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.
<template>
<UIcon name="i-heroicons-light-bulb" />
</template>
You won't be able to use all icons in the
name prop here as icons are bundled using egoist/tailwindcss-icons.Don't forget to install and specify the icon collections you need in your
nuxt.config.ts, read more about this in Theming.Dynamic
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).
<template>
<UIcon name="i-ph-rocket-launch" dynamic />
</template>
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