Icon

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>

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.

export default defineAppConfig({
  ui: {
    icons: {
      dynamic: true
    }
  }
})

Props