Iconify for Ember offline use

Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?

If you do not want to use API, you need to provide icon component with data for all icons you are using. There are several options:

  • You can build icon bundles for icons that are used in your application, making icon data available offline.
  • You can use individual icon packages, which is similar to icon bundles, but import icons one by one and are easier to use.

See icon bundles for Iconify for Ember documentation.

Available icons

All icon sets available with Iconify API are available as standalone icon packages. There are over 100,000 icons from more than 100 icon sets.

If you want to use icon packages, as shown in example above, see icon packages documentation for more information.

Icon packages

Format for icon data packages:

  • ES package: @iconify-icons/{prefix}
  • CommonJS package: @iconify/icons-{prefix} (not needed for Ember)

where "{prefix}" is icon set prefix.

In Ember components you should always use ES packages. CommonJS packages are for use with Node.js and outdated frameworks that do not support ES modules.

See individual icon packages documentation.

Usage in Ember

In Ember components if you are using single package icons, you can either assign icon name to icon using addIcon() or you can reference icon as object.

To reference icon as object, you need to import it in component and set it as property of component class:

import Component from '@glimmer/component';
import presentationPlay from '@iconify-icons/mdi-light/presentation-play';

export default class IconDemoComponent extends Component {
   iconData = presentationPlay;

Then you can use it in template:

<IconifyIcon @icon={{iconData}} />