Iconify for Vue 2 function: addAPIProvider

This tutorial is part of Iconify for Vue 2 functions 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

@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

<template>
   <Icon icon="@local:material-icons:home" />
</template>

<script>

import { addAPIProvider, Icon } from '@iconify/vue2';

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

export default {
   components: {
       Icon,
   },
};
</script>

See API providers documentation for details.