<!-- Default -->
<span class="atm-icon far fa-external-link " aria-hidden="true"></span>
<!-- Solid icon -->
<span class="atm-icon fas fa-external-link " aria-hidden="true"></span>
<!-- Light icon -->
<span class="atm-icon fal fa-external-link " aria-hidden="true"></span>
<!-- XS icon -->
<span class="atm-icon far fa-external-link fa-xs " aria-hidden="true"></span>
<!-- SM icon -->
<span class="atm-icon far fa-external-link fa-sm " aria-hidden="true"></span>
<!-- LG icon -->
<span class="atm-icon far fa-external-link fa-lg " aria-hidden="true"></span>
<!-- 2X icon -->
<span class="atm-icon far fa-external-link fa-2x " aria-hidden="true"></span>
<!-- 3X icon -->
<span class="atm-icon far fa-external-link fa-3x " aria-hidden="true"></span>
<!-- 5X icon -->
<span class="atm-icon far fa-external-link fa-5x " aria-hidden="true"></span>
<!-- 3X icon -->
<span class="atm-icon far fa-external-link fa-7x " aria-hidden="true"></span>
<span class="atm-icon {{style}} {{icon}} {{#if rotation}}{{rotation}}{{/if}} {{#if size}}{{size}}{{/if}} {{modifier}}" aria-hidden="true"></span>
/* Default */
{
"icon": "fa-external-link",
"style": "far",
"size": "",
"rotation": "",
"modifier": ""
}
/* Solid icon */
{
"icon": "fa-external-link",
"style": "fas",
"size": "",
"rotation": "",
"modifier": ""
}
/* Light icon */
{
"icon": "fa-external-link",
"style": "fal",
"size": "",
"rotation": "",
"modifier": ""
}
/* XS icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "fa-xs",
"rotation": "",
"modifier": ""
}
/* SM icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "fa-sm",
"rotation": "",
"modifier": ""
}
/* LG icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "fa-lg",
"rotation": "",
"modifier": ""
}
/* 2X icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "fa-2x",
"rotation": "",
"modifier": ""
}
/* 3X icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "fa-3x",
"rotation": "",
"modifier": ""
}
/* 5X icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "fa-5x",
"rotation": "",
"modifier": ""
}
/* 3X icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "fa-7x",
"rotation": "",
"modifier": ""
}
The icon component uses FontAwesome for displaying icons. The icon component supports different style, rotation and size variants