angularperformanceiconsfont-awesomeangular-fontawesome

How to fix performance issues with angular-fontawesome icons

I was debugging my angular application to see which components might have caused performance issues. On most screens, I found that the FaIconComponent has the most time spent to built.

Performance Profile

Is there any way to reduce the resources consumed by FaIconComponent?

This is how I currently embed it in the template:

<fa-icon
    [icon]="faInfoCircle"
/>

faInfoCircle is an import from the respective @fortawesome. I tried replacing it with

<fa-icon
    icon="info-circle"
/>

but there was no significant improvement visible. Is having an icon just expensive itself? Are there any other libraries that are significantly more performant. Is this even worth to improve?

Thanks!

Solution

  • If the component has so much overhead, you should switch over to the normal implementation of font awesome icons, just an i tag and CSS get's the job done.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<p>
    <i class="fa fa-spinner fa-spin"></i>
    <i class="fa fa-refresh fa-spin"></i>
    <i class="fa fa-cog fa-spin"></i>
</p>
<br>
<p>
    <i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
    Use a few styles together and you'll have easy pull quotes or a great introductory article icon.
</p>
<br>
<h2>Stacked Icons</h2>
<p>
    <span class="fa-stack fa-lg">
        <i class="fa fa-square-o fa-stack-2x"></i>
        <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
</p>