Font Awesome for Angular2Dart

Some of our biggest projects here are written in Angular+Dart, but most of the code we have written for these projects is not easily re-usable. As we start to migrate towards Angular2, one of our goals is to spin off some re-usable components as open source projects.

Today, we are announcing our first Angular2Dart component: a wrapper for FontAwesome. If you're not using Font Awesome, you should seriously consider it: it is a huge (675+) and free (MIT/OFL) icon collection implemented as a font. The vector graphics scale to any size without pixelation and the designers behind the project are phenomenal.

What does it mean to wrap Font Awesome in an Angular2 component? It means that instead of writing markup like this…

<i class='fa fa-flag'></i>

…you can write markup like this…

<fa name='flag'></fa>

In addition to having better semantics (creating a new <fa> tag instead of overloading the italics tag), using Angular2 components has other benefits such as style encapsulation (Font Awesome styles won't interfere with your own stylesheet) and is also generally less verbose and easier to write. Compare bare Font Awesome…

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>Item one</li>
  <li><i class="fa-li fa fa-check-square"></i>Item two</li>
  <li><i class="fa-li fa fa-check-square"></i>Item three</li>

…with equivalent Angular2 markup…

<fa-ul bullet='check-square'>
  <fa-li>Item one</fa-li>
  <fa-li>Item two</fa-li>
  <fa-li>Item three</fa-li>

For more information on this project:

If you're not familiar with Angular2Dart, check out to learn more. We love using it!