Iconify for Svelte function: addIcon

This tutorial is part of Iconify for Svelte functions tutorial.

Function addIcon() adds one icon to the component's icon data storage.

Usage

The function has the following parameters:

• name, string. Icon name.
• data, IconifyIcon. Icon data.

The function returns boolean value: true on success, false if something is wrong with data.

Examples

jsimport { addIcon } from '@iconify/svelte';

addIcon('mdi:account-box', {
   body: '<path d="M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" fill="currentColor"/>',
   width: 24,
   height: 24,
});

Note: icons added by this function are not cached in localStorage and sessionStorage.

API provider

API provider parameter can be used to load custom icons asynchronously without triggering API queries.

Each API provider has its own API endpoint, so if you are using custom API provider that component doesn't have configuration for (currently by default component has no API providers configured), the component will not attempt to load missing icons from an unknown API provider.

Example:

jsimport { addIcon } from '@iconify/svelte';

addIcon('@custom:md:test', {
   body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
   width: 24,
   height: 24,
});

Code above adds the following icon:

• provider is "custom".
• prefix is "md".
• name is "test".

In component template this icon can be used like this:

jsx<Icon icon="@custom:md:test" />

Syntax is similar to default icon syntax, but with API provider "@custom" in icon name. See API providers documentation for details.

One icon

This function adds one icon in IconifyIcon format.

If you want to add several icons, or you have IconifyJSON data, use function addCollection() instead.