index

title: Iconify for Vue 2
replacements:
  - code: "60,000"
    value: "${counters.icons}"
  - code: "80+"
    value: "${counters.sets}+"
  - code: "@iconify/vue2@1"
    value: "${vue.import-vue2}"
types:
  IconifyIcon: "/docs/types/iconify-icon.md"
functions:
  addCollection: "./add-collection.md"
  addIcon: "./add-icon.md"
  iconExists: "./icon-exists.md"
  iconLoaded: "./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"

Iconify for Vue 2

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

include notices/vue2

Installation

If you are using NPM:

npm install --save-dev @iconify/vue2@1

If you are using Yarn:

yarn add --dev @iconify/vue2@1

Usage

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

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

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.

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.

onLoad

include icon-components/components/onload

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

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