Ionic rc0 Ionicons not showing

Ionic Framework ionic-v3
1

Hello guys,

I’m following the migration steps to RC0: https://github.com/driftyco/ionic/blob/master/CHANGELOG.md

I have almost everything migrated, but one thing is still not working.

The icons are not showing in my project.

I checked the variables.scss and the imports its there:

    // Ionicons
    // --------------------------------------------------
    // The premium icon font for Ionic. For more info, please see:
    // http://ionicframework.com/docs/v2/ionicons/
    $ionicons-font-path: "../assets/fonts";
    @import "ionicons";

Also in the www folder the font seems to be there: assets/fonts/ionicons.xxx

image

In the image you can see an white rectangle when it should be a back button. (that button is add automaticaly because of the nav.push(xpto)).

Also if I try to add an icon:

<ion-icon name="heart"></ion-icon>

The result is the same…

Can someone help me?

2

I’m experiencing the same problem.
But if I restart ionic serve the icons appear. sometimes. I cannot figure out a pattern when they appear and when not.

3

Try deleting .tmp and www folder and try again. It worked for me.

1 Like
4

I delete the .temp and www directories and the problem it’s still there…

I’m testing in the browser (Chorme 53) and I checked in the network tab in developers tools.
I don’t see any request for the ionicons font. Maybe is something broken during the build?

5

I changed the path to the Ionicons in variables.scss as below and it worked for me.

// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/v2/ionicons/

$ionicons-font-path: "../assets/fonts";
@import "ionicons";
6

Sorry, but the path looks exactly the same.

I have the same path, and it’s not working… :frowning:

7

I’m also running into this issue. The fonts are not copying to the assets folder.
Strangely enough, other folders are copied just fine…

8

I am getting this problem frequently when debugging the app in chrome. This started after my app was converted to rc0.
If I delete the build folder in www and run ionic serve the icons come back and Then have few minutes they disappear again.

9

Any chance you guys are using a local git repo? I’m gonna investigate more, but coincidentally the fonts folder did not get to repository

10

I had the same issue and just found the solution (for me, at least). As i upgraded an existing app to rc0 (the app started with like alpha.15 :stuck_out_tongue: ), my variables.scss was missing the ionicons import. More preciesly, it was missing this part:

// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/v2/ionicons/

$ionicons-font-path: "../assets/fonts";
@import "ionicons";
11

Hello again,

I was following the migration steps described here: https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#copying-your-project-to-a-new-project

I installed a new app ionic start --v2 myApp and then I started migrating my code to the new project.
I have the font path and import in my variabled.scss. In my project it never shows the icons.

I made a test and downloaded the ionic conference app using the version RC0.
The first time I built the project the icons were there… Then I stopped the ionic serve, and started it again… and it icons were not there…

image

Maybe there’s a bogos in the build scripts? Some weird cache?

12

well in my case it’s happening in a fresh RC0 project…
So far I have a feeling that ionic serve does not copy the fonts, or worse yet deletes them, but running the package.json build command copies them

13

I think its device specific.
For me , icons always load on One Plus 3 device.
icons never load on Motorola E3

Both running on Android 6.x

14

I have a OnePlus 2. It’s my personal dev phone and it never loads…
I’m completely lost here… lol