SVG framework function: loadIcon

This tutorial is part of Iconify SVG Framework functions tutorial.

The function loadIcon() retrieves an icon from Iconify API.

It returns Promise instance, making it very easy to use in asynchronous code.

When to use this function:

• When you need to get icon data inside an asynchronous function.

When not to use this function:

• To preload multiple icons that you will use later. Use loadIcons() instead.

It is safe to call function multiple times with the same icon name, SVG framework will not load icon data from Iconify API twice. If you pass string icon name as parameter, multiple calls of the function will return the same Promise instance.

Usage

The function has the following parameter:

• icon, string|IconifyIconName. Name of the icon to load.

The function returns Promise instance, which returns FullIconifyIcon data for icon on success.

IconifyIconName type

IconifyIconName is a simple object with the following properties, all properties are mandatory:

• provider, string. API provider. For public Iconify API value is an empty string "".
• prefix, string. Icon set prefix.
• name, string. Icon name.

Examples

Using Promise syntax:

html<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
<script>
   Iconify.loadIcon('mdi:home')
       .then((data) => {
           console.log('Loaded home icon!');
       })
       .catch((err) => {
           console.error('Failed to load home icon');
       });
</script>

Async/await syntax:

jstry {
   const data = await Iconify.loadIcon('mdi:home');
   console.log('Loaded home icon!');
} catch (err) {
   console.error('Failed to load home icon');
}

If you want to load multiple icons, see loadIcons().