using-other-styles.md

Using other styles

Font Awesome icons are separated into styles, which are shipped in separate packages to meet different needs and to reduce individual packages size. To use an icon you'll need to install a package which contains it.

The general workflow of adding a new icon:

1. Visit fontawesome.com/icons to browse icons.
2. Open the icon page to find out which style it belongs to.
3. Install a package containing the icon if not already installed (use style name from the previous step and see full package names below).
4. Import the icon from the installed package and use it in your application using either icon library or explicit references approach.

Packages prefixed with free are available for everybody, while packages prefixed with pro require a Font Awesome Pro subscription and additional configuration.

Solid Icons

$ yarn add @fortawesome/free-solid-svg-icons
# or
$ yarn add @fortawesome/pro-solid-svg-icons

import { faClock } from '@fortawesome/free-solid-svg-icons';

Brand Icons

$ yarn add @fortawesome/free-brands-svg-icons

import { faTwitter } from '@fortawesome/free-brands-svg-icons';

Regular Icons

$ yarn add @fortawesome/free-regular-svg-icons
# or
$ yarn add @fortawesome/pro-regular-svg-icons

import { faCalendar } from '@fortawesome/free-regular-svg-icons';

Pro-only Light Icons

$ yarn add @fortawesome/pro-light-svg-icons

import { faArrowAltRight } from '@fortawesome/pro-light-svg-icons';

Pro-only Duotone Icons

$ yarn add @fortawesome/pro-duotone-svg-icons

import { faCamera } from '@fortawesome/pro-duotone-svg-icons';

Same Icon from Multiple Styles

To use the same icon from the multiple styles you'll need to use import aliases to avoid the name conflicts:

import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons';

// Add icons to the library for convenient access in other components
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';

export class AppModule {
  constructor(library: FaIconLibrary) {
    // Add multiple icons to the library
    library.addIcons(fasStar, farStar);
  }
}

<fa-icon [icon]="['fas', 'star']"></fa-icon>
<fa-icon [icon]="['far', 'star']"></fa-icon>