index

title: Iconify for Vue
replacements:
  - code: "60,000"
    value: "${counters.icons}"
  - code: "80+"
    value: "${counters.sets}+"
  - code: "@iconify/vue@3"
    value: "${vue.import}"
types:
  IconifyIcon: "/docs/types/iconify-icon.md"
functions:
  addCollection: "./add-collection.md"
  addIcon: "./add-icon.md"
  iconExists: "./icon-exists.md"
  listIcons: "./list-icons.md"
  loadIcons: "./load-icons.md"
  loadIcon: "./load-icon.md"
  getIcon: "./get-icon.md"
  enableCache: "./enable-cache.md"
  disableCache: "./disable-cache.md"
  addAPIProvider: "./add-api-provider.md"
  replaceIDs: "./replace-ids.md"
  buildIcon: "./build-icon.md"
  setFetch: "./set-fetch.md"
  setCustomIconLoader: "./custom-loaders.md"
  setCustomIconsLoader: "./custom-loaders.md"

Iconify for Vue

include: icon-components/components/intro
replacements:
  - search: React
    replace: Vue

Please be aware that this component is not designed for server side rendering. If you are using SSR, consider switching to Iconify Icon web component.

Installation

If you are using NPM:

npm install --save-dev @iconify/vue@3

If you are using Yarn:

yarn add --dev @iconify/vue@3

Usage

Install [npm]@iconify/vue@3 and import component from it (component is exported as named export):

import { Icon } from "@iconify/vue";

Then in template use [var]Icon component with icon name as [prop]icon parameter:

<Icon icon="mdi-light:home" />

Nuxt.js {#ssr}

Component is compatible with Nuxt.js.

The component does not retrieve icon data until it is mounted. For server side rendering it means generated HTML will not include SVGs, icons will be rendered only on the client side after hydration is complete.

If you do want to render SVGs on the server side, provide icon data as a parameter instead of icon name or use a different icon component.

SSR attribute

In version 4.1.2 new boolean attribute was added: [prop]ssr.

If enabled, it will render icon immediately:

<Icon icon="mdi:home" :ssr="true" />

It is safe to use without SSR because there is no hydration to break.

If you are using SSR, such as Nuxt, make sure icon data is available on both server and client sides.

Properties

You can pass any custom properties to component.

Required properties:

• [prop]icon, [type]IconifyIcon | string icon name or icon data.

include: icon-components/component-optional-props
replacements:
  - search: hAlign
    replace: horizontalAlign
  - search: vAlign
    replace: verticalAlign
  - search: hFlip
    replace: horizontalFlip
  - search: vFlip
    replace: verticalFlip

See below for more information on each optional property.

In addition to the properties mentioned above, the icon component accepts any other properties and events. All other properties and events will be passed to generated SVG element, so you can do stuff like setting the inline style, add title, add [prop]onClick event and so on.

Icon

include: icon-components/components/intro-icon

Color

include: icon-components/components/intro-color

<Icon icon="mdi:home" style="color: red" />

For various ways to set color, see how to change icon color in Iconify for Vue.

Dimensions

include: icon-components/components/intro-size

<Icon icon="mdi:home" style="font-size: 24px;" />

For various ways to change icon dimensions, see how to change icon dimensions in Iconify for Vue.

Transformations

include: icon-components/components/intro-transform

For more details see how to transform icon in Iconify for Vue.

Load event

include icon-components/components/onload-event

Functions {#functions}

include: icon-components/components/functions-list/header

Check available icons {#getting-icons}

include: icon-components/components/functions-list/getting-icons

Adding icons {#adding-icons}

include: icon-components/components/functions-list/adding-icons

Custom loaders {#custom-loaders}

include: icon-components/components/functions-list/custom-loaders

Helper functions {#helper}

include: icon-components/components/functions-list/helpers

API functions {#api}

include: icon-components/components/functions-list/api

Internal API functions {#internal}

include: icon-components/components/functions-list/internal