How to Use Font Awesome With Ionic 4

The built in Ionicons with Ionic are great, but if you need something specific, have your own custom icons or anything that’s not covered by the standard icon pack you have to find different ways.

One of the best free icon packages is Font Awesome, but it doesn’t work that good out of the box with Ionic.

ionic-4-font-awesome

Therefore, we will use the Angular Font Awesome wrapper library that will help us to import all the icons we need and use them in different ways even with an additional component that can add some nice effects!

Note: This tutorial was created with Ionic 4.0.0 Beta 7!

Are you ready to start learning?

Join the Ionic Academy

Starting our App with Font Awesome Integration

To get started we set up a new app with a tab bar (because we want to set a tab bar icon later) and install the basic packages we need. The different icon sets are optional, so if you only use icons from one set you don’t need all, but I’ve just added them all for this example:

Integrating Font Awesome

Now we need to load the different icons and there are 2 ways to handle this.

The first way is to explicitly import only what we need, and it’s the code I commented out. If you follow that approach, you have control about which icons will be loaded but you always have to maintain the imports if you want to use something new.

The second way is to simply import a whole set of icons, in our case we import the fas, far and fab icon sets and add everything from them to the library.

This library object is more or less the collection of available icons inside our app that we setup in the beginning.

For our example we will use the following code inside the app/app.module.ts:

Using the Explicit Way

With either way you can use the explicit style but of course it makes sense to only import what you need in this case. In order to use the component of the package make sure the module is available inside your lazy loaded page, so in our case change the app/home/home.module.ts to:

Now you need to import all the icons you need directly inside your class and make them available as a variable, which would look like this inside the app/home/home.page.ts:

Now the view can use this variable directly to set the icon of the fa-icon component. Therefore, change the app/home/home.page.html to:

If you now serve your app you will see the one icon inside your view.

When you need more icons, you have to import them again from the according package, make them available inside the class and use them in the view. But there’s also another way.

Using the Library

If you need many icons and don’t want to import them one by one you can import the whole set of icons (like we did in our app module). Then, all icons are available inside your library and you can use their names directly.

There are also many options you can additionally add to the component to rotate or spin an icon, or to increase the size. Also, there are different ways to use the icon name, either as a string or as an array with components like you might have seen with the routerOutlet to create a path.

Another way to add something like a badge to your icons is to use the fa-layers component which holds an icon and an additional layer to display a value or text! To make this look a bit nicer we have to add some CSS as well, but that’s the next step.

Finally, we can of course now also use the icons inside the regular Ionic button components. In that case you can’t use the ion-icon because it would not find the icon but you can simply use the component from the Font Awesome Angular package.

At all the places we can still make use of the slot to define where inside the Ionic component the icon should be added!

Now go ahead and change your app/home/home.html to:

As said before we might need some CSS styling for the layered badge, so here is the code example for your app/home/home.page.scss:

Now you got a nice view with Font Awesome icons and even additional effects that you can use to style your views!

Using Font Awesome Icons with Ionic Tabs

Sometimes having icons in regular places is not enough and you need them in your tab bar. With the current release there is no way to use the icon like we did before, but there’s a trick you can use to still use Font Awesome icons inside your tab bar.

Every icon can be downloaded as a SVG, so in our case we could download them from these links:

On those pages you will find a download link at the bottom, so download the SVG and copy them to your assets/icons/ folder now.

Now the trick: We can specify an SVG by it’s local path inside the Ionic tab bar!

It’s actually the same field for the icon where we normally use the name of one Ionicon but now it’s a path.

To get the desired result, simply change your app/tabs/tabs.page.html to:

Of course this approach would work with any other custom SVG or Icon that you have, so simply specify the local path to the asset and you get a fresh tab bar with custom icons!

You can also find a video version of this Quick Win below.

Tweet
Reddit
+1
Share
Email