Web component function: iconLoaded

This tutorial is part of Iconify Icon web component tutorial.

The function iconLoaded() checks if icon data is available for rendering.

Usage

The function has the following parameter:

• name, string. Icon name.

The function returns boolean value: true if icon data is available, false if icon data is not available.

Example

jsimport { iconLoaded, loadIcons } from "iconify-icon";

function renderLeftArrow() {
 // Check if 'bi:arrow-left' is available
 if (iconLoaded("bi:arrow-left")) {
   // Return HTML for 'bi:arrow-left'
   return '<iconify-icon icon="bi:arrow-left"></iconify-icon>';
 }

 // Load icon. Bad example because this should use a callback to re-render arrow in a stateful
 // component, but this code example is about iconLoaded(), not loadIcons()

 // Function loadIcons() is asynchronous, so in this example it will only trigger loading, but
 // icon data will not be available immediately
 loadIcons(["bi:arrow-left"]);

 // Return '<'
 return "<span>&lt;</span>";
}

Legacy

Note: in old versions of component, this function was named iconExists(). It was the same function, but with bad name.

Because of bad name, some developers assumed it checks if icon exists on Iconify API. It does not. All it does is checks component's storage.

To avoid confusion, function was renamed.