<!-- Default -->
<span class="icon far fa-external-link " aria-hidden="true"></span>
<!-- Solid icon -->
<span class="icon fas fa-external-link " aria-hidden="true"></span>
<!-- Light icon -->
<span class="icon fal fa-external-link " aria-hidden="true"></span>
<!-- 90° rotated icon -->
<span class="icon far fa-external-link fa-rotate-90 " aria-hidden="true"></span>
<!-- 180° rotated icon -->
<span class="icon far fa-external-link fa-rotate-180 " aria-hidden="true"></span>
<!-- 270° rotated icon -->
<span class="icon far fa-external-link fa-rotate-270 " aria-hidden="true"></span>
<!-- Horizontal flipped icon -->
<span class="icon far fa-external-link fa-flip-horizontal " aria-hidden="true"></span>
<!-- Vertical flipped icon -->
<span class="icon far fa-external-link fa-flip-vertical " aria-hidden="true"></span>
<!-- Spinning icon -->
<span class="icon far fa-external-link fa-spin " aria-hidden="true"></span>
<!-- Pulse icon -->
<span class="icon far fa-external-link fa-pulse " aria-hidden="true"></span>
<!-- XS icon -->
<span class="icon far fa-external-link fa-xs " aria-hidden="true"></span>
<!-- SM icon -->
<span class="icon far fa-external-link fa-sm " aria-hidden="true"></span>
<!-- LG icon -->
<span class="icon far fa-external-link fa-lg " aria-hidden="true"></span>
<!-- 2X icon -->
<span class="icon far fa-external-link fa-2x " aria-hidden="true"></span>
<!-- 3X icon -->
<span class="icon far fa-external-link fa-3x " aria-hidden="true"></span>
<!-- 5X icon -->
<span class="icon far fa-external-link fa-5x " aria-hidden="true"></span>
<!-- 3X icon -->
<span class="icon far fa-external-link fa-7x " aria-hidden="true"></span>
<span class="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": ""
}
/* 90° rotated icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "",
"rotation": "fa-rotate-90",
"modifier": ""
}
/* 180° rotated icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "",
"rotation": "fa-rotate-180",
"modifier": ""
}
/* 270° rotated icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "",
"rotation": "fa-rotate-270",
"modifier": ""
}
/* Horizontal flipped icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "",
"rotation": "fa-flip-horizontal",
"modifier": ""
}
/* Vertical flipped icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "",
"rotation": "fa-flip-vertical",
"modifier": ""
}
/* Spinning icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "",
"rotation": "fa-spin",
"modifier": ""
}
/* Pulse icon */
{
"icon": "fa-external-link",
"style": "far",
"size": "",
"rotation": "fa-pulse",
"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