# index

```yaml
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

```yaml
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](/docs/iconify-icon/index.md).

## Installation

If you are using NPM:

```bash
npm install --save-dev @iconify/ember
```

If you are using Yarn:

```bash
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:

```hbs
<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.

```yaml
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

```yaml
include: icon-components/components/intro-icon
```

## Color

```yaml
include: icon-components/components/intro-color
```

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

For various ways to set color, see [how to change icon color in Iconify for Ember](./color.md).

## Dimensions

```yaml
include: icon-components/components/intro-size
```

```hbs
<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](./dimensions.md).

## Transformations

```yaml
include: icon-components/components/intro-transform
```

For more details see [how to transform icon in Iconify for Ember](./transform.md).

## 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.

```hbs
<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}

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

### Adding icons {#adding-icons}

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

### Helper functions {#helper}

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

### API functions {#api}

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

### Internal API functions {#internal}

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