Comparing adding class="fa-li" to or using [listItem]="true", the icon becomes misaligned vertically:

<ul class="nav flex-column fa-ul">
    <li class="nav-item">
        <a class="nav-link" [routerLink]="['/welcome']" routerLinkActive="active">
            <fa-icon icon="home" [listItem]="true"></fa-icon>
            Welcome
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" [routerLink]="['/devices']" routerLinkActive="active">
            <fa-icon icon="desktop-alt" class="fa-li"></fa-icon>
            Devices
        </a>
    </li>
</ul>

As you all may know, Angular 6 is out!
When I try to update my angular 5 project to angular 6, getting following error on console.
Package "@fortawesome/angular-fontawesome" has an incompatible peer dependency to "rxjs" (requires "^5.5.2", would install "6.1.0"). Invalid range: ">=4.0.0"

Please try updating your rx-js dependency to above 6. #

I need to use two types of copyright icon, regular and solid

In documentation both have the same name

In code too... This is causing an error in typescript linter

Both exists in respectives packages

I am getting below error, When I am trying to use icons in Angular v4.
It doesn't come instantly at the time of installation. but after some time it get triggered and need to revert all imports.

ERROR in Error: Metadata version mismatch for module .. /node_modules/@fortawesome/angular-fontawesome/angular-fontawesome.d.ts, found version 4, expected 3, resolving symbol NavbarModule in ../src/app/shared/navbar/navbar.module.ts, resolving symbol NavbarModule in .. src/app/shared/navbar/navbar.module.ts
    at syntaxError (...\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34)
    at simplifyInContext (...\node_modules\@angular\compiler\bundles\compiler.umd.js:24979:23)
    at StaticReflector.simplify (...\node_modules\@angular\compiler\bundles\compiler.umd.js:24991:13)
    at StaticReflector.annotations (...\node_modules\@angular\compiler\bundles\compiler.umd.js:24418:41)
    at _getNgModuleMetadata (...\node_modules\@angular\compiler-cli\src\ngtools_impl.js:138:31)
    at _extractLazyRoutesFromStaticModule (...\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26)
    at ...\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27
    at Array.reduce (<anonymous>)
    at _extractLazyRoutesFromStaticModule (...\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10)
    at ...\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27
    at Array.reduce (<anonymous>)
    at _extractLazyRoutesFromStaticModule (...\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10)
    at Object.listLazyRoutesOfModule (...\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (...\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (...\node_modules\@ngtools\webpack\src\plugin.js:212:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (...\node_modules\@ngtools\webpack\src\plugin.js:448:24)

We have been using Font Awesome 4 up until now and are now in the process to upgrade to version 5 properly.
All icons are working perfectly and this package seems to accomplish everything we have used so far in version 4 while being easy to use.

There is sadly one issue we are unable to solve: we would like to use a spinning circle-notch icon before Angular is done bootstrapping our application.
With Font Awesome 4, we would just add font-awesome's CSS files to .angular-cli.json and add <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> to the HTML file.

This approach doesn't work, not even if importing the icons in main.ts without angular-fontawesome as described here: https://fontawesome.com/how-to-use/use-with-node-js

Is there a recommended way to achieve the same behavior?

Is there a way to replace the generated markup so all you have is the svg tag?

Looking at using FA with Angular Material in as seamless & tree-shakable way as possible, and one approach is to embed fa-icon inside mat-icon tag, but much of materials styling is dependent on an svg tag being embedded as a direct ancestor of the mat-icon tag.

That is one option, the other is to use ng-fa to hook into Materials icon library but I'm not a fan of copying sprites into assets folder, would prefer to do it with this library.

I've filed an issue with Material team regarding supporting adding raw SVG directly, something like.

iconRegistry.addSvgIcon( 'user', faUser.icon[4] /* raw SVG property of imported icon */)

Thoughts on this approach? Note, this currently does not work as addSvg expects a url and does not accept a string.

Hello.
I'm using Angular 6 along with angular-fontawesome.

After general setup everything works perfect locally, but once deployed to production the icons aren't styled properly and I get the error in console:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-1Crl/GVwHSFINQSzfyuyHRndH1ljVgs19xrozlYQ1eU='), or a nonce ('nonce-...') is required to enable inline execution.

nginx configured the way it sends a header like:

...
add_header Content-Security-Policy "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; connect-src 'self' https://*.trendeo.com; object-src 'none'";
...

So the question is: can I avoid fontawesome inline styles to be inserted into the page and somehow include 'em into a separate file (or import into main .scss-file)?

1st of all, I happy to see this official library get done. FA5 is really awesome and I know there are quite a lot of modern webprojects with Angular+Boostrap that are definitively going to upgrade to FA5 Pro if there is nice official library to support it.

Here is a very nice description of how best to provide a library
http://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types/

that will leverage the most important features of angular 5, so that it can be easily used also in mobiles or similar smaller bundles.

When using the pro light icons I get the following error on the line where I add the light icon to the library:

angular_1  | ERROR in src/app/abcd/abcd.module.ts(14,13): error TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'.
angular_1  |   Type 'IconDefinition' is not assignable to type 'IconPack'.
angular_1  |     Index signature is missing in type 'IconDefinition'.

I don't get this error using the solid icons or the free icons.

My module code has the following:

import {library} from '@fortawesome/fontawesome-svg-core';
// import {faArrowToBottom} from '@fortawesome/pro-solid-svg-icons'; <--- Works fine
import {faArrowToBottom} from '@fortawesome/fontawesome-pro-light';

library.add(faArrowToBottom); <--- Error is on this line

My template uses the icon as follows:

<fa-icon [icon]="['fal', 'arrow-to-bottom']"></fa-icon>

Currently all icons are taken from fas by default. I would like to only use the light icons for my project and would like to configure this while loading the module. This would avoid a lot of boilerplatte by not adding the fal prefix to all icons.

I think this is caused by the fact, that instead of using ngOnInit the first ngOnChanges is used, that runs before ngOnInit.

I'm currently using ver 0.1.0-8 of this library. So far -9 and -10 versions have been published to NPM, but there are no tags in Github to show what they represent and what has changed. Is this a bug in the publish process? I find the tags very handy to determine whether I should upgrade.

Is it possible to transform fontawesome icons with css using angular fontawesome? For example, I'd like to be able to define a class "active" that rotates all specified icons 90 degrees with a 0.2s transition. I could do that pretty easily with css when we were using glyphicons, but it for angular-fontawesome, the only way I've found to do it is with the "rotate" attribute, and I'm not sure how to animate the transition.

If an icon is added to the library with library.add(faUser), we can then display them in a template with <fa-icon="user"></fa-icon> for solid icons. it looks like if we want to use the same icon from the "light" set, we would do <fa-icon icon="['fal', 'user']"></fa-icon>.

Is this the intended syntax? It works, but is a bit clunky. It might be worth adding a separate "prefix" or "iconSet" input to handle those separately.

I am trying to run the Explicit reference code example within an Angular 6 library. It doesn't compile and here are the build errors.

projects/test-lib/src/lib/font-test/font-test.component.ts(11,3): error TS4029: Public property 'faCoffee' of exported class has or is using name 'IconDefinition' from external module "c:/git/test-app/node_modules/@fortawesome/fontawesome-common-types/index" but cannot be named.

Error: projects/test-lib/src/lib/font-test/font-test.component.ts(11,3): error TS4029: Public property 'faCoffee' of exported class has or is using name 'IconDefinition' from external module "c:/git/test-app/node_modules/@fortawesome/fontawesome-common-types/index" but cannot be named.

    at Object.<anonymous> (c:\git\test-app\node_modules\ng-packagr\lib\ngc\compile-source-files.js:53:68)
    at Generator.next (<anonymous>)
    at fulfilled (c:\git\test-app\node_modules\ng-packagr\lib\ngc\compile-source-files.js:4:58)
    at <anonymous>

Please note that it works for an application but not a library. The library is generated using the following command:

ng new test-app
cd test-app
ng generate library test-lib

Thanks

-Rushui

import {faUserCircle} from '@fortawesome/free-regular-svg-icons';
library.add(faUserCircle);
//console output
FontAwesome: Could not find icon with iconName=user-circle and prefix=fas

//other icons is works

Importing only one icon from the pro packages, results in a 1MB plus in the bundles and 10 minutes additional compiling time.

Here is a minimal code to reproduce the issue :

`import { NgModule } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

import { faCircleNotch } from '@fortawesome/pro-regular-svg-icons';
library.add(faCircleNotch);

@NgModule({
imports: [FontAwesomeModule]
})
export class IconModule {}
`

Import this module in the app.module.ts.

I have the same behavior with smaller impact with the free packages, probably because it has less icons.

Here is a reproduction repo :
https://github.com/ibenjelloun/angular-fortawesome-issue34-reprodution

after the clone just update the .yarnrc with the fontawesome registry or replace pro by free in the icon.module.ts.
run yarn + yarn bundle-report

Trying to use FA with Angular Material and their SVG library expects the complete SVG XML element. That implementation seems to make sense, how can I get the SVG from a FA import?

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

faGoogle is a IconDefinition, in order to get the SVG XML I have to re-compose this using something like:

const svg = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${icon.icon[0]} ${icon.icon[1]}"><path d="${icon.icon[4]}" /></svg>; // use template strings

Does ng-FA expose a helper method/property to abstract this for future use?

angular/components#11630

This project includes integration with np. Which would be great to use.

The only issue is that when npm run tagVersion is ran the following occurs:

> @fortawesome/[email protected] tagVersion /Users/robmadole/Development/src/FortAwesome/angular-fontawesome
> node ./tasks/tag-version


Publish a new version of @fortawesome/angular-fontawesome (current: 0.1.0-8)

? Select semver increment or specify new version prerelease 	0.1.0-9
? How should this pre-release version be tagged in npm? prerelease

Commits:
- Revert "Adding np to dev deps"  8f632df
- Adding np to dev deps  05f7240
- Build fixes and fullTemplateTypeCheck support (#28)  f70ef0e

? Will bump from 0.1.0-8 to 0.1.0-9 and tag this release in npm as prerelease. Continue? Yes
 ✔ Prerequisite check
 ✔ Git
 ✔ Cleanup
 ✔ Installing dependencies using Yarn
 ✔ Running tests
 ✔ Pushing tags

 @fortawesome/angular-fontawesome 0.1.0-8 published 🎉
Error: Command failed: npm test


    at Promise.all.then.arr (/Users/robmadole/Development/src/FortAwesome/angular-fontawesome/node_modules/np/node_modules/execa/index.js:236:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
Error: Command failed: npm test


    at Promise.all.then.arr (/Users/robmadole/Development/src/FortAwesome/angular-fontawesome/node_modules/np/node_modules/execa/index.js:236:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
Error: Command failed: npm test
module.js:538
    throw err;
    ^

Error: Cannot find module 'karma'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/robmadole/Development/src/FortAwesome/angular-fontawesome/tasks/test.js:5:16)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
npm ERR! Test failed.  See above for more details.


> @fortawesome/[email protected] test /Users/robmadole/Development/src/FortAwesome/angular-fontawesome
> node ./tasks/test


    at Promise.all.then.arr (/Users/robmadole/Development/src/FortAwesome/angular-fontawesome/node_modules/np/node_modules/execa/index.js:236:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
Error: Command failed: npm test
module.js:538
    throw err;
    ^

Error: Cannot find module 'karma'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/robmadole/Development/src/FortAwesome/angular-fontawesome/tasks/test.js:5:16)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
npm ERR! Test failed.  See above for more details.


> @fortawesome/[email protected] test /Users/robmadole/Development/src/FortAwesome/angular-fontawesome
> node ./tasks/test


    at Promise.all.then.arr (/Users/robmadole/Development/src/FortAwesome/angular-fontawesome/node_modules/np/node_modules/execa/index.js:236:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
Execution of `np` errored, see above for more information.npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @fortawesome/[email protected] tagVersion: `node ./tasks/tag-version`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @fortawesome/[email protected] tagVersion script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/robmadole/.npm/_logs/2018-04-10T15_00_07_202Z-debug.log

I'm using datatables and I want to create a button in the table, but instead of text I want to place an icon using fontawesome. I have the following code:

this.dtOptions = { //... buttons: [ //... { extend: 'pdf', text: '<fa-icon [icon]="faDownload"></fa-icon>' } ] }

What is the correct way to implement symbols using SVG sprites?

Any chance this project could adopt a CHANGELOG.md file so we can follow what updates are included in each new release?

See FortAwesome/vue-fontawesome@3b1b483 for an example.

I'm getting the follow error:

ERROR TypeError: Cannot read property 'html' of undefined
at FaIconComponent.ngOnChanges (angular-fontawesome.es5.js:106)

// @TODO: make sure that it doesn't break things to do html[0] here.
this.renderedIconHTML = this.sanitizer.bypassSecurityTrustHtml(renderedIcon.html[0]);

app.module

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

imports: [
    ...
    FontAwesomeModule
  ],

component.html

<fa-icon [icon]="faUser"></fa-icon>

package.json

"@angular": "^5.2.0",
"@fortawesome/angular-fontawesome": "0.1.0-3",
"@fortawesome/fontawesome": "^1.1.3",
"@fortawesome/fontawesome-free-solid": "^5.0.6",

What could I be missing?

Describe the problem

After upgrading the NPM package "@fortawesome/angular-fontawesome" to 0.1.0, an error appears with the message :

Unexpected value 'undefined' imported by the module 'xxx'
(where 'xxx' is the name of the module where FontAwesomeModule is imported)

What did you expect?

I expected that I could compile my project after ugrading the package "@fortawesome/angular-fontawesome" to the latest version without an error.

Reproducible test case

You can find a demo on stackblitz which reproduces that bug.

Currently component expects a short form for boolean attributes, e.g. <fa-icon spin></fa-icon>. I don't think the short form of attributes is used in Angular world, so it will probably be confusing to users.

What's more important is that it blocks an important use case of binding variable to the boolean attribute. I was trying to disable animation by setting attribute to false and was surprised that it did not work.

Consider this example:

@Component({
  selector: 'my-comp',
  template: '<fa-icon [icon]="faSpinner" [spin]="isAnimated"></fa-icon><button type="button" (click)="isAnimated=!isAnimated">Toggle animation</button>'
})
class MyComp {
  isAnimated = true;
}

I would expect animation to stop after clicking a button first time.

Need a proper guide to implement the component.

1. how to import module
2. how to use component

I think we should discuss how API for the icon registration in the library should look like. If we should have it at all.

Option 1: reuse fontawesome.library

This means that users will have to do somewhere (where?) in their code:

import fontawesome from '@fortawesome/fontawesome'
import { faUser } from '@fortawesome/fontawesome-free-solid'

fontawesome.add(faUser);

Than they can just specify icon name in the template:

<fa-icon icon="fas-user"></fa-icon>

• pro: No extra implementation in the angular-fontawesome library
• con: Component using icons does not declare its dependencies clearly
• con: Requires use of low level API
• con: Not clear where to put this code

Option 2: provide helper method on the FontAwesomeModule

We'll provide a helper method, which will register icons passed in as parameters in the library. Here is a small example how it can look like:

import { faUser } from '@fortawesome/fontawesome-free-solid'

@NgModule({
  imports: [
    FontAwesomeModule.withIcons(faUser),
  ]
})
class AppModule {}

Than icon can be used in the templates by just providing its name like in option 1:

<fa-icon icon="fas-user"></fa-icon>

• pro: Obvious place for registering icons
• pro: Implementation is quite simple
• con: Component using icons does not declare its dependencies clearly (better than option 1, but still)

Option 3: no registration at all

Require developer to import icon and pass it into template. In this case developer will have to import every icon they want to use in the component explicitly. Here is an example:

import { faUser } from '@fortawesome/fontawesome-free-solid'

@Component({
  selector: 'my-app',
  template: '<fa-icon [icon]="faUser"></fa-icon>',
})
export class AppComponent {
  faUser = faUser;
}

• pro: Explicit dependency declaration for a component
• pro Easy to find all icon usages or unused icons with TypeScript tooling (find usages, noUnusedVariables in TsConfig)
• con: Requires extra field in component for every icon, quite verbose

Let me know what do you think?

I see repos for react and vue, but not for angular. Do you have problems with create one?
You could do it with this https://github.com/gonzofish/angular-librarian
https://github.com/FriOne/ng-fontawesome

I found out strange behaviour when migrating from FA4 to FA5. I thought I had some strange code so I started new ASP.NET Core Angular template and repeat strange behaviour:
This code works:

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

library.add(faCoffee);
  <fa-icon icon="coffee"></fa-icon>
  <fa-icon icon="calendar"></fa-icon>   <!-- Not rendered (because it was not added to library which is expected -->

If I also add faCalendar to library, icon is displayed.

But adding icon from PRO shows errors (but Angular is compiled and page is displayed):

Error TS2345 (TS) Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'.
Type 'IconDefinition' is not assignable to type 'IconPack'.
Index signature is missing in type 'IconDefinition'. D:\Temp\FontAwesome\FontAwesome\ClientApp (tsconfig or jsconfig project) D:\Temp\FontAwesome\FontAwesome\ClientApp\src\app\share.module.ts

Another strange behaviour is that when I include one icon from PRO, all icons works:

import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faHome } from "@fortawesome/fontawesome-pro-regular";
library.add(faHome);

  <fa-icon [icon]="['far', 'home']"></fa-icon>
  <fa-icon [icon]="['far', 'key']"></fa-icon>    <!-- Just works, but I think it shouldn't. -->

Everything from packages.json about @fortawesome:

        "@fortawesome/angular-fontawesome": "0.1.0-10",
        "@fortawesome/fontawesome-pro-light": "^5.0.13",
        "@fortawesome/fontawesome-pro-regular": "^5.0.13",
        "@fortawesome/fontawesome-svg-core": "^1.2.0-14",

Hello,
I load the Icon name from the server, and pass it as a parameter..
Something like this:

src/app/app.component.ts

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
iconName: string = 'coffee';
iconPrefix: string = 'fas'
}

and then in html

src/app/app.component.html

<fa-icon [icon]="[iconPrefix , iconName]">

This does not work as it does not accept strings as parameter. It throws an error
I looked in code but I cannot see how I can do this

it works only like this
<fa-icon [icon]="['fas', 'coffee']">
but not by passig them from the component ts
<fa-icon [icon]="[iconPrefix , iconName]">

How can I pass the icon name as parameter to the icon component?
Maybe I'm doing it all wrong?

Thank you

For the past hours I have been breaking my head on something pretty frustrating. Out of nowhere when I build my angular app and publish my website to azure the icons are missing! This did not happen last week for sure, I don't get it. It does work just fine when I use ng-serve and run the site locally but when I try to publish it it is as if all icons are gone... The command I use for building the app is "ng build --prod --aot" and the output is then used in the wwwroot folder of an dotnet core mvc app.

fullTemplateTypeCheck option enables more strict type checking mode for Angular templates to ensure that more errors are caught using static analysis. This in particular ensures that component properties used in the templates are public (see my SO answer regarding why they should be public).

Currently this option is false by default, but if user enables it AoT compilation will fail when angular-fontawesome is used:

src/app/editor/control-properties/image-property/image-property.component.html(7,3): : Directive FaIconComponent, Property 'cssClass' is private and only accessible within class 'FaIconComponent'.
src/app/editor/control-properties/image-property/image-property.component.html(7,3): : Directive FaIconComponent, Property 'renderedIconHTML' is private and only accessible within class 'FaIconComponent'.

angular-fontawesome should not fail AoT compilation if fullTemplateTypeCheck option is enabled in the project.

When I follow the instructions, I get this error:

How would you specify a specific color for an icon?

Thank you

Hi! I create native wysiwyg editor for Angular 6+ https://github.com/kolkov/angular-editor.
Is a good idea to include this module directly in my Angular 6+ library?

Something that will explosively increase usage of angular-fontawesome is if there is clear, easy and consistent instructions how to include/consume the angular-fontawesome in the 2 most powerful and popular angular 5 web project generators:

angular-seed :

• for more enterprise/advanced projects
• project: https://mgechev.github.io/angular-seed/
• github: https://github.com/mgechev/angular-seed
• example of an intergration: https://github.com/mgechev/angular-seed/wiki/Integration-with-AngularMaterial2

angular-cli:

• for fast 1-click projects
• project: https://cli.angular.io/
• github: https://github.com/angular/angular-cli
• example of an integration: https://material.angular.io/guide/getting-started

Hello,
I'm trying to create a dynamic icon component and append it to an element.

I have a directive that creates a badge with an icon on an element

import { icon } from '@fortawesome/fontawesome-svg-core';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';

constructor(
private viewContainerRef: ViewContainerRef,
@Inject(ComponentFactoryResolver) private factoryResolver: ComponentFactoryResolver,
private _elementRef: ElementRef)

/** Creates the badge element */
private _createBadgeElement(): HTMLElement {
const badgeElement = this._document.createElement('span');

  // factory comp resolver
  const factory = this.factoryResolver.resolveComponentFactory(FaIconComponent);

 // create component
  const _icon = this.viewContainerRef.createComponent(factory);
 // set content of the component
  _icon.instance.iconProp = faCoffee;
  _icon.instance.icon = icon({iconName: 'coffee', prefix: 'fas'});

 // append instance to element
 badgeElement.appendChild(_icon.location.nativeElement);

 this._elementRef.nativeElement.appendChild(badgeElement);
 return badgeElement;

}

// in the module I added FaIconComponent to entry components

I have no error, but the rendered result is this:

span id="mat-badge-content-18" class="mat-badge-content mat-badge-active">
< fa-icon class="ng-fa-icon ng-star-inserted" ></ fa-icon>
</span

And as result nothing is set in the icon
I don't understand why this does not work?

Thank you

If I use <fa-icon icon="coffee"></fa-icon> it is translated to fas-coffee and I have only far.
Is there a default font style option?

If not maybe adding in forRoot config?

I am trying to add this package in a new project of mine and I get a 404. Sometimes, I will get a 404 as well.

This is the command I'm running:

yarn add @fortawesome/angular-fontawesome

Which is right on the homepage. Is anybody else experiencing this problem? I also had a previous project that had this and ran yarn install. This is my package.json file:

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@fortawesome/angular-fontawesome": "0.1.0-10",
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-brands-svg-icons": "^5.1.0",
    "@fortawesome/free-solid-svg-icons": "^5.1.0",
    "@fortawesome/pro-light-svg-icons": "^5.1.0",
    "@fortawesome/pro-regular-svg-icons": "^5.1.0",
    "@fortawesome/pro-solid-svg-icons": "^5.1.0",
    "@ng-bootstrap/ng-bootstrap": "^2.1.1",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.6",
    "@angular/cli": "~6.0.7",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

This is the error I get when I run yarn install instead:

An unexpected error occurred: "https://npm.fontawesome.com/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.1.0-10.tgz: Request failed \"401 Unauthorized\"".

Did anyone get this issue when using angular-fontawesome with Angular 6?

Adding this line of code import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; causes that error.

It does not have actual library code, only examples and some config files. Published from the wrong directory I think. Should be dist instead of project root.

$ wget https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.1.0-6.tgz
$ tar xzvf angular-fontawesome-0.1.0-6.tgz
x package/package.json
x package/.editorconfig
x package/.travis.yml
x package/README.md
x package/UPGRADING.md
x package/yarn-error.log
x package/yarn.lock
x package/.idea/angular-fontawesome.iml
x package/.idea/codeStyles/codeStyleConfig.xml
x package/.idea/codeStyles/Project.xml
x package/.idea/inspectionProfiles/Project_Default.xml
x package/.idea/markdown-navigator.xml
x package/.idea/markdown-navigator/profiles_settings.xml
x package/.idea/misc.xml
x package/.idea/modules.xml
x package/.idea/shelf/doc_in_progress.xml
x package/.idea/shelf/doc_in_progress/shelved.patch
x package/.idea/vcs.xml
x package/.idea/workspace.xml
x package/examples/example.component.html
x package/examples/example.component.scss
x package/examples/example.component.ts
x package/examples/example.main.ts
x package/examples/example.module.ts
x package/examples/index.html
x package/examples/styles.scss

Hi
I have the next problem:

"export 'FontAwesomeModule' was not found in '@fortawesome/angular-fontawesome'

This problem appear when i import the module in the app.mudule.ts and this error dont allows run the application, when i go to import in the module does not show alerts or error in the app.module.ts but when i go run ng serve spear the before error and dont show nothing in the browser.

Thanks for your answers

Hello,

¿how to use <i class="fab fa-facebook-f"></i>?

thanks.

How can I use this library with pseudo elements?
Unfortunately, I didn't see any example about it.

Has anyone used this library with an app shell successfully?

Nothing "breaks" exactly but the icons initially render larger than expected until the Javascript execution kicks in and binds the actual content.

Thanks.

When using something like this <fa-icon [icon]="icon | async"></fa-icon> the component crashes on the first emit of null and doesn't go on if the icon changes in a later state. I would be nice if the component would not throw errors on null icons and just show the not available placeholder or something similar.

Is there any time-frame for first official release?

I am checking this thread every day, but last month was really quite (no changes ...).

When using universal for ssr the page loads the icons full size until the browser takes over, the reason for this is the inline styles are missing from the the universal app.

I'm not entirely sure why this is but it should be possible to include them as other modules such as material do.

library.add(faPaperPlane, faGlobeAmericas, faSmile, faLaugh, faGrin, faGift, faTrash, faImages, faUserCircle, faEdit,faAddressCard, faGooglePlusG, faTwitter, faFacebookF, faSearch);
Time: 769431ms
12.82385 minute