SVG framework function: addIcon

This tutorial is part of Iconify SVG Framework functions tutorial.

Function addIcon() adds one icon to the SVG framework'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

jsIconify.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,
});

Notes

• Icons added by this function are not cached in localStorage and sessionStorage.
• Calling this function will trigger re-scan of DOM on the next tick.

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:

jsIconify.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 HTML code this icon can be used like this:

html<span class="iconify" data-icon="@custom:md:test"></span>

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.