Web component function: getIcon

This tutorial is part of Iconify Icon web component tutorial.

The function getIcon() retrieves icon data.

Usage

The function has the following parameter:

• name, string. Icon name.

The function returns icon data in IconifyIcon format, null if icon is not available.

Examples

jsimport { getIcon } from 'iconify-icon';

const data = getIcon('bi:check2-circle');

Result:

json{
   "body": "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z\"/><path fill-rule=\"evenodd\" d=\"M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0a6.5 6.5 0 1 1-3.25-5.63a.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z\"/></g>",
   "left": 0,
   "top": 0,
   "width": 16,
   "height": 16,
   "rotate": 0,
   "vFlip": false,
   "hFlip": false
}

Another example:

jsimport { getIcon } from 'iconify-icon';

const data = getIcon('cil:paper-plane');

Result:

json{
   "body": "<path fill=\"currentColor\" d=\"M474.444 19.857a20.336 20.336 0 0 0-21.592-2.781L33.737 213.8v38.066l176.037 70.414L322.69 496h38.074l120.3-455.4a20.342 20.342 0 0 0-6.62-20.743zM337.257 459.693L240.2 310.37l149.353-163.582l-23.631-21.576L215.4 290.069L70.257 232.012L443.7 56.72z\"/>",
   "left": 0,
   "top": 0,
   "width": 512,
   "height": 512,
   "rotate": 0,
   "vFlip": false,
   "hFlip": false
}

Example with bad icon name, returns null:

jsimport { getIcon } from 'iconify-icon';

// null
const data = getIcon('no-such-icon');