Icon fonts not working in latest version v5.0.0

[marklanhamhc]

I just upgraded nativescript-ngx-fonticon to v5.0.0 in my app and now the icons aren't working, had to roll back to v4.2.1 to get them working again.

To date, I'm running the latest version of Nativescript and Angular.

"tns-ios": { "version": "6.1.1" }, "tns-android": { "version": "6.1.2" } "@angular/animations": "~8.2.11", "@angular/common": "~8.2.11", "@angular/compiler": "~8.2.11", "@angular/core": "~8.2.11", "@angular/forms": "~8.2.11", "@angular/http": "~7.2.15", "@angular/platform-browser": "~8.2.11", "@angular/platform-browser-dynamic": "~8.2.11", "@angular/router": "~8.2.11", "tns-core-modules": "6.1.2" "nativescript-angular": "^8.2.2"

[AklsKiu]

I was using version 4.2.1 and how upgradeable to version 5.0.0 the icons are no longer displayed and also do not emit any errors.

[alexander-mai]

I have the same problem using aot. Without aot it is working well.

Version 4.2.1 is working: TNSFontIconModule.forRoot({ /* https://fontawesome.com/ */ fa: "./assets/css/fontawesome.css", /* https://materialdesignicons.com/ */ mdi: "./assets/css/materialdesignicons.css" }),

Version 5.0.0 doesn't work: TNSFontIconModule.forRoot({ /* https://fontawesome.com/ */ fa: require("./assets/css/fontawesome.css"), /* https://materialdesignicons.com/ */ mdi: ("./assets/css/materialdesignicons.css") }),

I found out that forRoot is not called and therefore the config in the TNSFontIconService is empty.

[NathanWalker]

@alexander-mai The ./ relative syntax is likely not what you want when using require unless assets is purely right next to the module which is requiring those files which likely it is not. Use purely relative path from your module to where the css files are, for example:

TNSFontIconModule.forRoot({ 
  /* https://fontawesome.com/ */ 
  fa: require("../../assets/css/fontawesome.css"), 
  /* https://materialdesignicons.com/ */ 
  mdi: ("../../assets/css/materialdesignicons.css") 
})

If in fact it's relative via that pathing.

Another thing to try which I ran into with v5 on a larger project was I needed to use the InjectionToken the library provides, for example this worked (I believe various module configurations can affect which one may work for you - but try this if first suggestion doesn't work):

import { TNSFontIconModule, TNSFontIconService, USE_STORE } from 'nativescript-ngx-fonticon';
// turn debug on
TNSFontIconService.debug = true;

imports: [
  // other stuff, etc.
  TNSFontIconModule.forRoot({})
],
providers: [
  {
      provide: USE_STORE,
      useValue: {
        fa: require('../../../assets/fontawesome.min.css')
      },
    }
]

Just make sure the relative path in the require is correct for your project. Lemme know how either go 👍 Also update to 5.0.1 which I just posted - it's compiled with more recent angular (v8).

[JohanBeumer]

I'm experiencing the same problem, forRoot is not executed. I put the providers solution in place, but that also didn't give me the desired result. The css-file was loaded, but didn't return a valid value. I did some digging and ran into the following error :

JS: ERROR ERROR Error: Uncaught (in promise): TypeError: e.split is not a function JS: TypeError: e.split is not a function JS: at e.mapCss (file:///node_modules\nativescript-ngx-fonticon\services\fonticon.service.js:104:24) JS: at file:///node_modules\nativescript-ngx-fonticon\services\fonticon.service.js:73:22 JS: at new e (file:///node_modules\nativescript-angular\zone-js\dist\zone-nativescript.js:902:28) JS: at e.loadCssData (file:///node_modules\nativescript-ngx-fonticon\services\fonticon.service.js:70:15) JS: at s (file:///node_modules\nativescript-ngx-fonticon\services\fonticon.service.js:36:22) JS: at e.loadCss (file:///node_modules\nativescript-ngx-fonticon\services\fonticon.service.js:42:8) JS: at new e (file:///node_modules\nativescript-ngx-fonticon\services\fonticon.service.js:15:13) JS: at file:///node_modules\@angular\core\fesm5\core.js:20279:19

For me it turns out the split in mapCss should not be done on data, but on data.default. let sets = data.split("}"); --> let sets = data.default.split("}");

However, mapCss is called from different places and I can't oversee the impact for all situations if it is simply changed to data.default. If it is the solution at all.

I'm using version 5.0.2.

[Jonatthu]

This is happening as well on my app on 5.0.2

@NathanWalker The workaround did not work

ONSOLE ERROR file:///node_modules/@angular/core/fesm5/core.js:4002:0: ERROR Error: Uncaught (in promise): TypeError: data.split is not a function. (In 'data.split("}")', 'data.split' is undefined)
mapCss(file:///node_modules/nativescript-ngx-fonticon/services/fonticon.service.js:99:0)
at file:///node_modules/nativescript-ngx-fonticon/services/fonticon.service.js:73:0
at ZoneAwarePromise(file:///node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:902:0)
at loadCssData(file:///node_modules/nativescript-ngx-fonticon/services/fonticon.service.js:70:0)
at loadData(file:///node_modules/nativescript-ngx-fonticon/services/fonticon.service.js:36:0)
at loadCss(file:///node_modules/nativescript-ngx-fonticon/services/fonticon.service.js:42:0)
at TNSFontIconService(file:///node_modules/nativescript-ngx-fonticon/services/fonticon.service.js:15:0)
at _createClass(file:///node_modules/@angular/core/fesm5/core.js:20279:0)
at _createProviderInstance(file:///node_modules/@angular/core/fesm5/core.js:20251:0)
at initNgModule(file:///node_modules/@angular/core/fesm5/core.js:20184:0)
at NgModuleRef_(file:///node_modules/@angular/core/fesm5/core.js:20893:0)
at createNgModuleRef(file:///node_modules/@angular/core/fesm5/core.js:20882:0)
at file:///node_modules/@angular/core/fesm5/core.js:26748:0
at onInvoke(file:///node_modules/@angular/core/fesm5/core.js:26256:0)
at run(file:///node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:138:0)
at run(file:///node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:138:0)
at file:///node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:883:0
at runTask(file:///node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:188:0)
at drainMicroTaskQueue(file:/<…>

[Jonatthu]

@NathanWalker This is still happening on nativescript 6.2

[Jonatthu]

@marklanhamhc Did you make it work?

[alexander-mai]

Thx @NathanWalker,

i got it running using the InjectionToken with the provider.

[Jonatthu]

@alexander-mai could you show an example I am still not able to make it work?

[alexander-mai]

Hello @Jonatthu,

I implemented it in my app.module.ts in folder /src/app:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { TNSFontIconModule, TNSFontIconService, USE_STORE } from "nativescript-ngx-fonticon";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

TNSFontIconService.debug = true;

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        ...
        TNSFontIconModule.forRoot({}),
        AppRoutingModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        {
            provide: USE_STORE,
            useValue: {
                fa: require("../assets/css/fontawesome.css"),
                mdi: require("../assets/css/materialdesignicons.css")
            }
        }
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

export class AppModule {
    constructor() {
    }
}

The css files are located in /src/assets/css

I hope I could help you.

[Jonatthu]

@alexander-mai thanks it worked but I had a parser error, I got to modify in order to be compatible with ionicons.com

https://github.com/NathanWalker/nativescript-ngx-fonticon/issues/64

[exeleon]

@alexander-mai The ./ relative syntax is likely not what you want when using require unless assets is purely right next to the module which is requiring those files which likely it is not. Use purely relative path from your module to where the css files are, for example:

TNSFontIconModule.forRoot({ 
  /* https://fontawesome.com/ */ 
  fa: require("../../assets/css/fontawesome.css"), 
  /* https://materialdesignicons.com/ */ 
  mdi: ("../../assets/css/materialdesignicons.css") 
})

If in fact it's relative via that pathing.

Another thing to try which I ran into with v5 on a larger project was I needed to use the InjectionToken the library provides, for example this worked (I believe various module configurations can affect which one may work for you - but try this if first suggestion doesn't work):

import { TNSFontIconModule, TNSFontIconService, USE_STORE } from 'nativescript-ngx-fonticon';
// turn debug on
TNSFontIconService.debug = true;

imports: [
  // other stuff, etc.
  TNSFontIconModule.forRoot({})
],
providers: [
  {
      provide: USE_STORE,
      useValue: {
        fa: require('../../../assets/fontawesome.min.css')
      },
    }
]

Just make sure the relative path in the require is correct for your project. Lemme know how either go Also update to 5.0.1 which I just posted - it's compiled with more recent angular (v8).

I can confirm that using USE_STORE InjectionToken, finally I can solve AOT issues on iOS in release mode.

[jalberto-ghub]

I am having the same error on: tns-android: 6.3.1 "@angular/cli": "^8.3.23", "nativescript-ngx-fonticon": "^5.0.2"

Debuging the code I noticed that making the call to forRoot as:

TNSFontIconModule.forRoot({ 'icofont': require('../fonts/icofont-ngx.css') }), the config object on the service becomes:

config:{ icofont: { default: "CSS content here..."}}

This is why the data.split() fails. However if I initialize the code as follows: TNSFontIconModule.forRoot({ 'icofont': require('../fonts/icofont-ngx.css').default }), Then config is of the form: config:{ icofont: "CSS content here..."}

Which seems to be what the code expects. Still it is not working for me, but the error is at least not occurring.

[detonimarco]

With:

tns-android": {
      "version": "6.4.1"
    }
    "@angular/cli": "~8.3.6",
    "nativescript-ngx-fonticon": "^5.0.2",

Settings TNSFontIconModule.forRoot({ fa: require('./fonts/fontawesome.css').default })

where I have src/app/fonts

it works and I see the JS: mapped css: JS: fa-500px: \uf26e JS: fa-accessible-icon: \uf368 JS: fa-accusoft: \uf369 JS: fa-acquisitions-incorporated: \uf6af JS: fa-ad: \uf641 JS: fa-address-book: \uf2b9 JS: fa-address-card: \uf2bb JS: fa-adjust: \uf042 JS: fa-adn: \uf170 JS: fa-adobe: \uf778 JS: fa-adversal: \uf36a etc

but the icons are not rendered eg: <Label class="far" [text]="'fa-amazon' | fonticon"> it shows a strange Japanese character as the .tff file is not loaded

inside the app.css I have

.far {
  font-family: "Font Awesome 5 Free", "fa-regular-400";
       font-size: 40em;

}

what is not clear for me: I put the fa-regular-400.ttf font in src/app/fonts. Where does the application know the font file is inside that folder?

[alexander-mai]

@detonimarco: Maybe it is because you named the css class .farinstead of .fain your app.css

I have no problems with nativescript 6.4.1.

[detonimarco]

Thanks @alexander-mai I changed from far to fa but still have wrong Japanese symbol, my app folder has project

• src
  • app
    • fonts structure

[alexander-mai]

If there are wrong (japanese) symbols, it looks like the font is not loaded correctly or is not applied correctly to the Label. Did you add the css class fa to the Label, like that: <Label [text]="'fa-address-book' | fonticon" class="fa"></Label> My app.css looks like: .fa { font-family: FontAwesome, fontawesome-webfont; }

[detonimarco]

I'm using Font Awesome 5 so I have
.far { font-family: "Font Awesome 5 Free", "fa-regular-400"; font-size: 40em;

}

where inside "fonts" folder there is fa-regular-400.ttf. Still not clear for me how the plugin knows the fa-regular-400.ttf is in "fonts" folder (it is in plugin configuration I think)

[alexander-mai]

Try adding "Font Awesome 5 Free Regular" to the font-family, because it is the font name in the currently available font file

[detonimarco]

Stil not working. I'm doing other tests

[s0l4r]

Anyone got this working with Font Awesome 5 (free)?

I have configured it like this but it's not working:

Version info

Font Awesome: 5.13

{
  "nativescript": {
    "tns-ios": {
      "version": "6.4.1"
    }
   "dependencies": {
    ...
    "@angular/core": "~8.2.0",
    "nativescript-ngx-fonticon": "^5.0.2",
    ...

Module

import { TNSFontIconModule, TNSFontIconService, USE_STORE } from 'nativescript-ngx-fonticon';
// turn debug on
TNSFontIconService.debug = true;
...
@NgModule({
  imports: [
    ...
    TNSFontIconModule.forRoot({})
    ...
  ],
  exports: [
    TNSFontIconModule
  ],
  declarations: [
    SettingsComponent
  ],
  providers: [
    {
        provide: USE_STORE,
        useValue: {
          fa: require('../../fontawesome.css')
        },
      }
  ],
  schemas: [NO_ERRORS_SCHEMA]
})

CSS

.fa{
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Free Regular", "fa-regular-400";
  font-size: 40em;
}

Fonts

fonts/fa-regular-400.ttf

Log

CONSOLE LOG file:///node_modules/nativescript-ngx-fonticon/services/fonticon.service.js:65:0: Loading collection 'fa' from config key name: fa
CONSOLE LOG file:///node_modules/nativescript-ngx-fonticon/services/fonticon.service.js:133:0: mapped css:
*FontAwesomeusestheUnicodePrivateUseArea(PUA)toensurescreen
readersdonotreadoffrandomcharactersthatrepresenticons*/
.fa-500px: \uf26e
fa-accessible-icon: \uf368
...

Template

<Label [text]="'fa-amazon' | fonticon" class="fa"></Label>

The app is displaying a "?" instead of the actual icon.

Any ideas appreciated!

[jalberto-ghub]

Hi managed to get mine working with AOT, by doing the following change to what you have already:

1. Do not call forRoot() if you are adding the providers yourself

2. You need to provide the service, and require may return an object with default property: providers: [ { provide: USE_STORE, useValue: { fa: require('../../fontawesome.css').default }, TNSFontIconService }, ],

3. If you want this to work with AOT, then you need to use a factoryFuction for USE_STORE: export const fAw = require('../../fontawesome.css').default; export function fontFactory() { return { fa: fAw }; } Then on the providers: { provide: USE_STORE, useFactory: fontFactory }

[s0l4r]

Spent a lot of time trying to find the issue, and it turns out the fix for me was really simple... I needed to add the font-weight in the css as follows:

.fa{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

Hope this will help someone!

[Tjuri]

I solved the problem in my Nativescript Angular App by placing the font directory in /src and NOT in /src/app. See https://docs.nativescript.org/ui/components/icon-fonts

[EddyVerbruggen]

Here's an alternative I found that may help some folks.

I was updating an app from plugin version 4.2.1 to 7.0.0 today (for NativeScript 7 support) and encounted the error the OP reported. Before stumbling upon the solutions provided in this issue I tried swapping this:

  'icomoon': 'fonts/icomoon.css'

To this:

  'icomoon': knownFolders.currentApp().getFile("fonts/icomoon.css").readTextSync()

Which worked fine.

I resorted to that change because either the plugin or tsc was yelling at me in the console when using relative paths.

[teha-at]

  'icomoon': knownFolders.currentApp().getFile("fonts/icomoon.css").readTextSync()

@EddyVerbruggen thank you very much! I updated also from 4.2.1 to 7.0.0 and this piece of code change help me a lot.

[ethanzhu1]

Stil not working. I'm doing other tests

I have a similar issue. It displays this.

[ethanzhu1]

Stil not working. I'm doing other tests

I have a similar issue. It displays this.

Alright, moving fonts folder from src/app too src/ works.

[GauravKumar2606]

moving fonts folder from src/app too src/ worked for me also. Thanks.