SVG framework function: addAPIProvider

This tutorial is part of Iconify SVG Framework functions tutorial.

This function is part of API module and is not available in bundle without API support.

Function addAPIProvider() adds API provider.

Make sure you call it before retrieving icons from API provider, otherwise SVG framework will fail to retrieve icons. If you are not sure about execution order of your code, you can also use global variable IconifyProviders to set API providers configuration before loading SVG framework in a separate script. See API providers documentation for details.

API providers

API providers allow using icons from multiple API in the same document. For example, you can use default Iconify icons and custom icons from IconScout or Icons8 or custom API.

Public API

@my-icons

@icons8

mdi-light:home

@my-icons:line-24:home

@icons8:ios:home

To support providers, syntax for icon names have been extended. Icon names in Iconify icon components have 3 parts:

@api-provider : icon-prefix : icon-name
provider prefix name
  • provider points to API source. Starts with "@", can be empty (empty value is used for public Iconify API).
  • prefix is name of icon set.
  • name is name of icon.

All parts are separated by ":", provider is optional and can be skipped if empty.

Examples:

  • @my-icons:line-24:home: icon is retrieved from provider "my-icons". Icon name for that provider is line-24:home.
  • mdi-light:home: icon does not have provider, so provider is empty. Empty value is used for public Iconify API.

Usage

Function has the following parameters:

  • provider, string. Provider ID.
  • config, APIConfig. API configuration object.

Example

Iconify.addAPIProvider('local', {
   // Array of host names
   resources: ['http://localhost:3000'],
});
<span class="iconify" data-icon="@local:material-icons:home"></span>

See API providers documentation for details.