index

title: Iconify for Ember
replacements:
  - code: "60,000"
    value: "${counters.icons}"
  - code: "80+"
    value: "${counters.sets}+"
types:
  IconifyIcon: "../../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 Ember

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

Please be aware that this component is no longer maintained. Ember is an outdated framework. If you are using Ember, consider switching to Iconify Icon web component.

Installation

If you are using NPM:

npm install --save-dev @iconify/ember

If you are using Yarn:

yarn add --dev @iconify/ember

Usage

No need to import anything, Iconify for Ember is designed as addon for Ember, so Ember will automatically import component.

In template use [var]IconifyIcon component with imported icon name as [prop]icon parameter:

<IconifyIcon @icon="mdi-light:home" />

Properties

In Ember, all component properties start with [prop]@, such as [prop]@icon.

Required properties:

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

include: icon-components/component-optional-props
replacements:
  - search: '<span class="hljs-inline-prop">'
    replace: '<span class="hljs-inline-prop">@'

See below for more information on each optional property.

Icon

include: icon-components/components/intro-icon

Color

include: icon-components/components/intro-color

<IconifyIcon @icon="mdi:home" style="color: red;" />

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

Dimensions

include: icon-components/components/intro-size

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

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

Transformations

include: icon-components/components/intro-transform

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

onLoad

include icon-components/components/onload

SVG element properties

Any property that does not start with [prop]@ is passed to SVG element. You can use that to set style, class name, id or even override properties generated by component.

<IconifyIcon @icon="mdi:home" id="test" />

This behavior is different from other components. Ember clearly separates component and element properties, other frameworks do not.

Functions {#functions}

Component exports various functions, which developers can use to control icons.

In other frameworks you can import functions from main file, but Ember behaves differently. In Ember component, functions need to be imported directly from component file: [file]@iconify/ember/components/iconify-icon.

Functions are split in several groups (click function name to see more details and examples):

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