Icon

Allows you to show an icon from any icon set using Iconify.

Examples

Default icon set

By default, Lucide is used.

Code

<template>
  <div class="flex gap-4">
    <Icon
      v-for="icon in ['save', 'home', 'info', 'cog', 'message-circle-x', 'activity', 'building', 'crosshair']"
      :key="icon"
      class="w-6 h-6"
      :icon="icon"
    />
  </div>
</template>
<script setup lang="ts">
import { Icon } from '@/components/ui/icon'
</script>

Custom icon set

You can use any icon set available in iconify. In this example material design icons are used.

Code

<template>
  <div class="flex gap-4">
    <Icon
      v-for="icon in ['cog', 'home', 'book-education-outline', 'database-arrow-right', 'hair-dryer', 'home-percent', 'image-filter-drama', 'lightbulb-night']"
      :key="icon"
      :icon="icon"
      class="w-6 h-6"
      icon-set="mdi"
    />
  </div>
</template>
<script setup lang="ts">
import { Icon } from '@/components/ui/icon'
</script>