some ionicons not showing

Question

I have noticed that some of the icons I am using in my cordova project are not displaying on any of my devices. The ones that aren't working seem to have the word ios or android in the icon name (eg: ion-android-list or ion-ios-book-outline). Any ideas why they are just showing up blank? So far any icon I have used with a generic name works fine (eg ion-clock, ion-card). The icon names I am fetching from here: ionicons

I have included this in my index.html file:

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

Answer 1

Apparently the latest version of ionic when building an ionic app using ionic start from CMD loads an outdated icon library v1.5.2 (latest is v2.0.0).

• To update the fonts go to the latest ionicons site and download.
• Unzip and navigate to the /fonts dir and copy these 4 files to the www/lib/ionic/fonts dir of your app (overwrite).
• Do the same for the scss folder and paste to www/lib/ionic/scss/ionicons (overwrite).
• Lastly open the ionicons.css file from your extracted zip file /css/ionicicons.css and copy the contents of that file to www/lib/ionic/css/ionicons.css (NOTE: Make sure you edit and only replace the existing font version takes up about the first 1500 - 2000 lines, you will see the comments indicating)

Answer 2

Looks like you're using Ionic, rather than just Cordova.

You could do a partial upgrade to the forthcoming release of Ionic, which includes Ionicons v2:

1. Download /config/lib/fonts and /scss/ionicons from the latest nightly into the corresponding places in your /www/lib folder

2. Make sure you have gulp installed locally: npm install gulp

3. Run ionic setup sass (NOTE: backup your ionic.project file first as this makes some changes)

4. Replace the files in /www/lib/ionic/css with the new ones in /www/css (requires some renaming).

5. Fix the relative paths in these copied files: replace ../lib/ionic/fonts with ../fonts

I'm sure there's an easier way, but this worked for me. Someone's made a feature suggestion for always keeping ionicons up to date.

---

Update:

Animated icons aren't supported with Ionicons v2 yet (ion-spinner will be the replacement). Here's a hack to get them back:

https://github.com/driftyco/ionicons/issues/111#issuecomment-65788526

You need to add display:inline-block to the animation class to work on Android.