@fortawesome/angular-fontawesome

@fortawesome/angular-fontawesome

Version 4.0.0
Published 12 hours ago
142 kB
2 dependencies
MIT license

Install

npm i @fortawesome/angular-fontawesome

yarn add @fortawesome/angular-fontawesome

pnpm add @fortawesome/angular-fontawesome

Overview

Angular Fontawesome, an Angular library

Index

Type Aliases

AnimationProp
IconName
IconPrefix

Classes

class FaConfig

class FaConfig {}

property autoAddCss

autoAddCss: boolean;

property defaultPrefix

defaultPrefix: any;

Default prefix to use, when one is not provided with the icon name.
'fas'

property fallbackIcon

fallbackIcon: IconDefinition;

Provides a fallback icon to use whilst main icon is being loaded asynchronously. When value is null, then fa-icon component will throw an error if icon input is missing. When value is not null, then the provided icon will be used as a fallback icon if icon input is missing.
null

property fixedWidth

fixedWidth?: boolean;

Set icons to the same fixed width.
See Also
- {@link: https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons} false

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<FaConfig, never>;

property ɵprov

static ɵprov: _angular_core.ɵɵInjectableDeclaration<FaConfig>;

class FaDuotoneIconComponent

class FaDuotoneIconComponent extends FaIconComponent {}

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    FaDuotoneIconComponent,
    'fa-duotone-icon',
    never,
    {
        swapOpacity: { alias: 'swapOpacity'; required: false; isSignal: true };
        primaryOpacity: {
            alias: 'primaryOpacity';
            required: false;
            isSignal: true;
        };
        secondaryOpacity: {
            alias: 'secondaryOpacity';
            required: false;
            isSignal: true;
        };
        primaryColor: { alias: 'primaryColor'; required: false; isSignal: true };
        secondaryColor: {
            alias: 'secondaryColor';
            required: false;
            isSignal: true;
        };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<FaDuotoneIconComponent, never>;

property primaryColor

readonly primaryColor: _angular_core.InputSignal<string>;

Customize the color of the primary icon layer. Accepts any valid CSS color value.
CSS inherited color

property primaryOpacity

readonly primaryOpacity: _angular_core.InputSignal<string | number>;

Customize the opacity of the primary icon layer. Valid values are in range [0, 1.0].
1.0

property secondaryColor

readonly secondaryColor: _angular_core.InputSignal<string>;

Customize the color of the secondary icon layer. Accepts any valid CSS color value.
CSS inherited color

property secondaryOpacity

readonly secondaryOpacity: _angular_core.InputSignal<string | number>;

Customize the opacity of the secondary icon layer. Valid values are in range [0, 1.0].
0.4

property swapOpacity

readonly swapOpacity: _angular_core.InputSignal<boolean | 'true' | 'false'>;

Swap the default opacity of each duotone icon’s layers. This will make an icon’s primary layer have the default opacity of 40% rather than its secondary layer.
false

method buildParams

protected buildParams: () => IconParams;

method findIconDefinition

protected findIconDefinition: (
    i: IconProp | IconDefinition
) => IconDefinition$1 | null;

class FaIconComponent

class FaIconComponent {}

constructor

constructor();

property a11yRole

readonly a11yRole: _angular_core.ModelSignal<string>;

Specify the role attribute for the rendered element.
'img'

property animation

readonly animation: _angular_core.ModelSignal<AnimationProp>;

Icon animation.
Most of the animations are only available when using Font Awesome 6. With Font Awesome 5, only 'spin' and 'spin-pulse' are supported.

property border

readonly border: _angular_core.ModelSignal<boolean>;

property fixedWidth

readonly fixedWidth: _angular_core.ModelSignal<boolean>;

property flip

readonly flip: _angular_core.ModelSignal<any>;

property icon

readonly icon: _angular_core.ModelSignal<any>;

property inverse

readonly inverse: _angular_core.ModelSignal<boolean>;

property mask

readonly mask: _angular_core.ModelSignal<any>;

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    FaIconComponent,
    'fa-icon',
    never,
    {
        icon: { alias: 'icon'; required: false; isSignal: true };
        title: { alias: 'title'; required: false; isSignal: true };
        animation: { alias: 'animation'; required: false; isSignal: true };
        mask: { alias: 'mask'; required: false; isSignal: true };
        flip: { alias: 'flip'; required: false; isSignal: true };
        size: { alias: 'size'; required: false; isSignal: true };
        pull: { alias: 'pull'; required: false; isSignal: true };
        border: { alias: 'border'; required: false; isSignal: true };
        inverse: { alias: 'inverse'; required: false; isSignal: true };
        symbol: { alias: 'symbol'; required: false; isSignal: true };
        rotate: { alias: 'rotate'; required: false; isSignal: true };
        fixedWidth: { alias: 'fixedWidth'; required: false; isSignal: true };
        transform: { alias: 'transform'; required: false; isSignal: true };
        a11yRole: { alias: 'a11yRole'; required: false; isSignal: true };
    },
    {
        icon: 'iconChange';
        title: 'titleChange';
        animation: 'animationChange';
        mask: 'maskChange';
        flip: 'flipChange';
        size: 'sizeChange';
        pull: 'pullChange';
        border: 'borderChange';
        inverse: 'inverseChange';
        symbol: 'symbolChange';
        rotate: 'rotateChange';
        fixedWidth: 'fixedWidthChange';
        transform: 'transformChange';
        a11yRole: 'a11yRoleChange';
    },
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<FaIconComponent, never>;

property pull

readonly pull: _angular_core.ModelSignal<any>;

property renderedIconHTML

readonly renderedIconHTML: _angular_core.Signal<_angular_platform_browser.SafeHtml>;

property rotate

readonly rotate: _angular_core.ModelSignal<any>;

property size

readonly size: _angular_core.ModelSignal<any>;

property symbol

readonly symbol: _angular_core.ModelSignal<any>;

property title

readonly title: _angular_core.ModelSignal<string>;

Specify a title for the icon.
This text will be displayed in a tooltip on hover and presented to the screen readers.

property transform

readonly transform: _angular_core.ModelSignal<any>;

method buildParams

protected buildParams: () => IconParams;

method findIconDefinition

protected findIconDefinition: (
    i: IconProp | IconDefinition
) => IconDefinition$1 | null;

class FaIconLibrary

class FaIconLibrary implements FaIconLibraryInterface {}

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<FaIconLibrary, never>;

property ɵprov

static ɵprov: _angular_core.ɵɵInjectableDeclaration<FaIconLibrary>;

method addIconPacks

addIconPacks: (...packs: IconPack[]) => void;

method addIcons

addIcons: (...icons: IconDefinition[]) => void;

method getIconDefinition

getIconDefinition: (prefix: IconPrefix, name: IconName) => IconDefinition | null;

class FaLayersComponent

class FaLayersComponent implements OnInit {}

Fontawesome layers.

property classes

readonly classes: _angular_core.Signal<{
    'fa-fw': boolean | undefined;
    'fa-layers': boolean;
}>;

property faFw

readonly faFw: _angular_core.Signal<boolean>;

property fixedWidth

readonly fixedWidth: _angular_core.InputSignal<boolean>;

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    FaLayersComponent,
    'fa-layers',
    never,
    {
        size: { alias: 'size'; required: false; isSignal: true };
        fixedWidth: { alias: 'fixedWidth'; required: false; isSignal: true };
    },
    {},
    never,
    ['*'],
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<FaLayersComponent, never>;

property size

readonly size: _angular_core.InputSignal<any>;

method ngOnInit

ngOnInit: () => void;

class FaLayersCounterComponent

class FaLayersCounterComponent {}

constructor

constructor();

property content

readonly content: _angular_core.InputSignal<string>;

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    FaLayersCounterComponent,
    'fa-layers-counter',
    never,
    {
        content: { alias: 'content'; required: true; isSignal: true };
        title: { alias: 'title'; required: false; isSignal: true };
        position: { alias: 'position'; required: false; isSignal: true };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<FaLayersCounterComponent, never>;

property position

readonly position: _angular_core.InputSignal<
    'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
>;

property renderedHTML

readonly renderedHTML: _angular_core.Signal<_angular_platform_browser.SafeHtml>;

property title

readonly title: _angular_core.InputSignal<string>;

method buildParams

protected buildParams: () => CounterParams;

class FaLayersTextComponent

class FaLayersTextComponent {}

constructor

constructor();

property border

readonly border: _angular_core.InputSignal<boolean>;

property content

readonly content: _angular_core.InputSignal<string>;

property fixedWidth

readonly fixedWidth: _angular_core.InputSignal<boolean>;

property flip

readonly flip: _angular_core.InputSignal<any>;

property inverse

readonly inverse: _angular_core.InputSignal<boolean>;

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    FaLayersTextComponent,
    'fa-layers-text',
    never,
    {
        content: { alias: 'content'; required: true; isSignal: true };
        title: { alias: 'title'; required: false; isSignal: true };
        flip: { alias: 'flip'; required: false; isSignal: true };
        size: { alias: 'size'; required: false; isSignal: true };
        pull: { alias: 'pull'; required: false; isSignal: true };
        border: { alias: 'border'; required: false; isSignal: true };
        inverse: { alias: 'inverse'; required: false; isSignal: true };
        rotate: { alias: 'rotate'; required: false; isSignal: true };
        fixedWidth: { alias: 'fixedWidth'; required: false; isSignal: true };
        transform: { alias: 'transform'; required: false; isSignal: true };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<FaLayersTextComponent, never>;

property pull

readonly pull: _angular_core.InputSignal<any>;

property renderedHTML

readonly renderedHTML: _angular_core.Signal<_angular_platform_browser.SafeHtml>;

property rotate

readonly rotate: _angular_core.InputSignal<any>;

property size

readonly size: _angular_core.InputSignal<any>;

property title

readonly title: _angular_core.InputSignal<string>;

property transform

readonly transform: _angular_core.InputSignal<any>;

method buildParams

protected buildParams: () => TextParams;

Updating params by component props.

class FaStackComponent

class FaStackComponent {}

property classes

readonly classes: _angular_core.Signal<{ 'fa-stack': boolean }>;

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    FaStackComponent,
    'fa-stack',
    never,
    { size: { alias: 'size'; required: false; isSignal: true } },
    {},
    never,
    ['*'],
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<FaStackComponent, never>;

property size

readonly size: _angular_core.InputSignal<any>;

Size of the stacked icon. Note that stacked icon is by default 2 times bigger, than non-stacked icon. You'll need to set size using custom CSS to align stacked icon with a simple one. E.g. fa-stack { font-size: 0.5em; }.

class FaStackItemSizeDirective

class FaStackItemSizeDirective {}

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    FaStackItemSizeDirective,
    'fa-icon[stackItemSize],fa-duotone-icon[stackItemSize]',
    never,
    {
        stackItemSize: {
            alias: 'stackItemSize';
            required: false;
            isSignal: true;
        };
        size: { alias: 'size'; required: false; isSignal: true };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<FaStackItemSizeDirective, never>;

property stackItemSize

readonly stackItemSize: _angular_core.InputSignal<'1x' | '2x'>;

Specify whether icon inside FaStackComponent should be rendered in regular size (1x) or as a larger icon (2x).

class FontAwesomeModule

class FontAwesomeModule {}

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<FontAwesomeModule, never>;

property ɵinj

static ɵinj: _angular_core.ɵɵInjectorDeclaration<FontAwesomeModule>;

property ɵmod

static ɵmod: _angular_core.ɵɵNgModuleDeclaration<
    FontAwesomeModule,
    never,
    [
        typeof FaIconComponent,
        typeof FaDuotoneIconComponent,
        typeof FaLayersComponent,
        typeof FaLayersTextComponent,
        typeof FaLayersCounterComponent,
        typeof FaStackComponent,
        typeof FaStackItemSizeDirective
    ],
    [
        typeof FaIconComponent,
        typeof FaDuotoneIconComponent,
        typeof FaLayersComponent,
        typeof FaLayersTextComponent,
        typeof FaLayersCounterComponent,
        typeof FaStackComponent,
        typeof FaStackItemSizeDirective
    ]
>;

Interfaces

interface FaIconLibraryInterface

interface FaIconLibraryInterface {}

method addIconPacks

addIconPacks: (...packs: IconPack[]) => void;

method addIcons

addIcons: (...icons: IconDefinition[]) => void;

method getIconDefinition

getIconDefinition: (prefix: IconPrefix, name: IconName) => IconDefinition | null;

interface FaProps

interface FaProps {}

Fontawesome props.

property animation

animation?: AnimationProp;

property border

border?: boolean;

property className

className?: string;

property counter

counter?: boolean;

property fixedWidth

fixedWidth?: boolean;

property flip

flip?: FlipProp;

property inverse

inverse?: boolean;

property pull

pull?: PullProp;

property rotate

rotate?: RotateProp | string;

property size

size?: SizeProp;

property stackItemSize

stackItemSize?: '1x' | '2x';

interface IconDefinition

interface IconDefinition {}

property icon

icon: [
    number,
    number,
    string[],
    string,
    // unicode
    string | string[]
];

property iconName

iconName: IconName;

property prefix

prefix: IconPrefix;

interface IconLookup

interface IconLookup {}

property iconName

iconName: IconName;

property prefix

prefix: IconPrefix;

interface IconPack

interface IconPack {}

index signature

[key: string]: IconDefinition;

Type Aliases

type AnimationProp

type AnimationProp =
    | 'beat'
    | 'fade'
    | 'beat-fade'
    | 'bounce'
    | 'flip'
    | 'shake'
    | 'spin'
    | 'spin-reverse'
    | 'spin-pulse'
    | 'spin-pulse-reverse';

type IconName

type IconName = IconName$1 | (string & {});

type IconPrefix

type IconPrefix = IconPrefix$1 | (string & {});

Package Files (1)

types/angular-fontawesome.d.ts

Dependencies (2)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (1)

@angular/core

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@fortawesome/angular-fontawesome.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@fortawesome/angular-fontawesome)

HTML

<a href="https://www.jsdocs.io/package/@fortawesome/angular-fontawesome"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 17 minutes ago.
Package analyzed in 4736 ms.
Missing or incorrect documentation? Open an issue for this package.

@fortawesome/angular-fontawesome

Install

Overview

Index

Classes

Interfaces

Type Aliases

Classes

class FaConfig

property autoAddCss

property defaultPrefix

property fallbackIcon

property fixedWidth

See Also

property ɵfac

property ɵprov

class FaDuotoneIconComponent

property ɵcmp

property ɵfac

property primaryColor

property primaryOpacity

property secondaryColor

property secondaryOpacity

property swapOpacity

method buildParams

method findIconDefinition

class FaIconComponent

constructor

property a11yRole

property animation

property border

property fixedWidth

property flip

property icon

property inverse

property mask

property ɵcmp

property ɵfac

property pull

property renderedIconHTML

property rotate

property size

property symbol

property title

property transform

method buildParams

method findIconDefinition

class FaIconLibrary

property ɵfac

property ɵprov

method addIconPacks

method addIcons

method getIconDefinition

class FaLayersComponent

property classes

property faFw

property fixedWidth

property ɵcmp

property ɵfac

property size

method ngOnInit

class FaLayersCounterComponent

constructor

property content

property ɵcmp

property ɵfac

property position

property renderedHTML

property title

method buildParams

class FaLayersTextComponent

constructor

property border

property content

property fixedWidth

property flip

property inverse

property ɵcmp

property ɵfac

property pull