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 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 component 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






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.


  • @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.


Function has the following parameters:

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


import { 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.