Unable to import from @fortawesome/free-regular-svg-icons when using an alias

Question

I'm unable to import icons when I use an alias to reference them. I noticed the problem specifically with from @fortawesome/free-regular-svg-icons. You sometimes need to use an alias because there might be a duplicate name for an icon in libraries and you want to import them both.

This is code that was working prior to a small Angular upgrade (7.1 -> 7.2). Here's the guidance from the fontawesome documentation. See the last section on the page.

I've tried upgrading fortawesome packages and screwing around with the aliases and icons being imported. I noticed that removing the alias allowed me to import the icons just fine.

app module

import { library, dom } from '@fortawesome/fontawesome-svg-core';

import { faSpinner, faCopy } from '@fortawesome/free-solid-svg-icons';
library.add(faSpinner, faCopy);

import { faCopy as farCopy } from '@fortawesome/free-regular-svg-icons';
library.add(farCopy); // <-- This is where the error is thrown

dom.watch();

relevant packages

"@angular/common": "^7.2.15",
"@angular/compiler": "^7.2.15",
"@angular/core": "^7.2.15",
"@angular/forms": "^7.2.15",
"@angular/http": "^7.2.15",
"@angular/material": "^7.2.0",
"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-common-types": "^0.2.21",
"@fortawesome/fontawesome-svg-core": "^1.2.21",
"@fortawesome/free-regular-svg-icons": "^5.10.1",
"@fortawesome/free-solid-svg-icons": "^5.10.1",

Browser Error Uncaught ReferenceError: farCopy is not defined

picture link was broken, added the raw text from the console. — Tresto, Aug 16 '19 at 13:27
Do you get this error with any other icon? Plus, can you show the full error? — Eliya Cohen, Aug 17 '19 at 18:09
yeah any icon i aliased. never resolved, worked around though. might abandon and switch to angular material icons if it's ever a sticking point in the future :/ — Tresto, Aug 28 '19 at 20:38

score 2 · Answer 1 · answered Aug 30 '19 at 19:56

I came across this issue today, but I'm using Typescript instead of Angular, unsure if this solution will work for you too.

My issue was when adding to fontawesome-svg-core from free-regular-svg-icons, I would get a compile error in my typescript.

Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'.

when I did

import { library } from '@fortawesome/fontawesome-svg-core';
import { faClock} from '@fortawesome/free-regular-svg-icons';
library.add(faClock); // <-- error here

What worked for me was forcing faClock to not be evaluated by

library.add(faClock as any);

Comment if that does or doesn't work for you, I'll take this post down if this solution doesn't translate over for you.

that's specifically what does NOT work for me. If I add the alias "as something" it will not import. Unfortunately you HAVE to add the alias to use the same named icon in multiple packs. — Tresto, Sep 27 '19 at 02:48

Unable to import from @fortawesome/free-regular-svg-icons when using an alias

1 Answers1