custom-icons.md

Custom icons

This guide explains how to use custom icons with angular-fontawesome.

First of all, you'll need a valid SVG file containing the icon you want to use. Please refer to the Icon Design Guidelines and Prep Icons for Upload to learn how to create an SVG icon which can be used with Font Awesome.

Icon definition

To use a custom icon in the project, you need to define an object specified by the IconDefinition type. All icons are defined using the same structure, so you can refer to existing icons as examples. The object should contain the following properties:

export interface IconDefinition {
    prefix: string; // prefix of the icon
    iconName: string; // name of the icon
    icon: [
        number, // viewBox width
        number, // viewBox height
        string[], // ligatures (not used in `angular-fontawesome`)
        string, // unicode (not used in `angular-fontawesome`)
        string | string[], // single path for a simple icon or array of two paths for a duotone icon
    ];
}

Knowing the icon structure, you can easily convert the SVG file to the IconDefinition object by picking up the relevant parts. Given an example SVG file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>
</svg>

The icon definition will look like the following:

import { IconDefinition } from '@fortawesome/angular-fontawesome';

const myIcon: IconDefinition = {
    prefix: 'fac',
    iconName: 'my-icon',
    icon: [
        512,
        512,
        [],
        '',
        'M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z',
    ],
};

You can also use a Font Awesome Kit to upload your custom icons or pick only the icons you'd like to use.

Use custom icon

To use a custom icon is no different from a Font Awesome icon. You can either add it to the icon library or use an explicit references approach.