Material Design Icons + webpack

[carrbrpoa]

Hello guys,

I started with this tutorial.

Then, I tried to webpack the project. Error:

Ok. So I found this nativescript-ngx-fonticon and uninstalled nativescript-ng2-fonticon and installed nativescript-ngx-fonticon and tried, in my app.module.ts:

import { TNSFontIconModule } from 'nativescript-ngx-fonticon';

...
@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptHttpModule,
        AppRoutingModule,
        TNSFontIconModule.forRoot({
            'mdi': '../fonts/material-design-icons.css'
        })
    ],
    declarations: [
    ...

This gives me a runtime error.

Actually, I just want to webpack the project, using MDI as fonticon. Any ideas/suggestions?

Thanks in advance! :)

[hypery2k]

you used the old plugin, please follow these steps: https://github.com/NathanWalker/nativescript-ngx-fonticon#install

[carrbrpoa]

Hey @hypery2k, thanks for the tip. After changing some things, I see tns run android display the font normally, but after webpacking with success, npm run start-android-bundle just doesn't display the fonts, no errors. Any ideias?

Thanks

[smarza]

@hypery2k @carrbrpoa Hi guys,

I'm having exacly the same issue here.

My project uses just font-awesome.

import { TNSFontIconModule } from 'nativescript-ngx-fonticon';
...
@NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptRouterModule,
        TNSFontIconModule.forRoot({'fa': '/assets/font-awesome.css'}),
        ...
    ],
    ...

The project build complect without erros, even with tns run android or npm run start-android-bundle, but the icons doesn't appears in the webpack apk version.

[hypery2k]

did you cleaned the platforms folder? If you change static resources you may have to clean your project

[carrbrpoa]

Hey @hypery2k, I did, today; same results. I'm with debug enabled, all that is outputted is:

JS: Collections to load: mdi
JS: ----------
JS: Loading collection 'mdi' from file: ./material-design-icons.css

[ludcila]

@smarza @carrbrpoa Something similar happened to me, everything was building fine but it was still missing the icons. It turned out that I was not bundling some css files. Did you make sure that you are bundling the css and the font files?

https://docs.nativescript.org/tooling/bundling-with-webpack#bundling-extra-assets

In my case, I had to add { from: "*.css" },

[carrbrpoa]

@ludcila, that was it! Thanks! 💯

[munikumar604]

I moved my font awsome css into css folder in app with webpack and it working as expected

TNSFontIconModule.forRoot({ 'fa': './css/font-awesome.css' })