Web component function: addAPIProvider

This tutorial is part of Iconify Icon web component tutorial.

Function addAPIProvider() adds API provider.

Make sure you call it before retrieving icons from API provider, otherwise the component 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 the component in a separate script. See API providers documentation for details.

API providers

API providers allow using icons from multiple API servers 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, the syntax for icon names has 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

The function has the following parameters:

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

Example

tsimport { addAPIProvider } from 'iconify-icon';

addAPIProvider('local', {
   // Array of host names
   resources: ['http://localhost:3000'],
});

// Demo using provider in icon name
export function renderHomeIcon() {
   // HTML: <iconify-icon icon="@local:material-icons:home"></iconify-icon>

   const node = document.createElement('iconify-icon');
   node.setAttribute('icon', '@local:material-icons:home');
   return node;
}

See API providers documentation for details.