4

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">
EternalHour
  • 8,308
  • 6
  • 38
  • 57
Alex Harper
  • 201
  • 1
  • 2
  • 8
  • Have you tried using an underscore "_" instead of a hyphen "-"? For example, `ion_android_list` instead of `ion-android-list`. – ChuongPham Jan 04 '15 at 13:52
  • @ChuongPham: I think those should be hyphens. AlexHarper: Have you recently upgraded your _Ionicons_ version, and which version you are using? – Roope Hakulinen Jan 04 '15 at 16:08
  • Thanks for the Suggestions @ChuongPham, but they are definitely supposed to be hyphens. In the css file inonic.css it shows this: `font-face { font-family: "Ionicons"; src: url("../fonts/ionicons.eot?v=1.5.2"); src: url("../fonts/ionicons.eot?v=1.5.2#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=1.5.2") format("truetype"), url("../fonts/ionicons.woff?v=1.5.2") format("woff"), url("../fonts/ionicons.svg?v=1.5.2#Ionicons") format("svg"); font-weight: normal; font-style: normal; }` – Alex Harper Jan 05 '15 at 02:12
  • Ok, so the icons seem to work if I use the icon names from v1.5.2, how then do I upgrade the icons to v2.0.0. I have tried replacing the files in the ionic lib directory and updating the css file to show v.2.0.0 however still the icons in question do now show. Any ideas? – Alex Harper Jan 05 '15 at 02:37
  • replace ios with ios7 | at least the ios ones would work then – divyenduz Jan 05 '15 at 11:59
  • @AlexHarper how u resolved pls help me – Erum Aug 08 '16 at 11:44

5 Answers5

8

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)
Alex Harper
  • 201
  • 1
  • 2
  • 8
  • Great answer +1. However I think on step 4 you meant to say "and copy the contents of that file to www/lib/ionic/css/ionicons.css" to "and copy the contents of that file to www/lib/ionic/css/ionic.css" – Vlad Bezden Feb 08 '15 at 15:44
  • 2
    not showing for me, improvement that it recognizes them but shows blank squares – rodling Feb 11 '15 at 03:39
  • 1
    any update on this? I just see a black square as well, would appreciate a follow up! – hummmingbear Feb 15 '15 at 07:51
  • You'll need to minify ionicons.css to ionicons.min.css if that's the one you point to; use an online minifier – Dunc Feb 17 '15 at 20:35
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.

Dunc
  • 18,404
  • 6
  • 86
  • 103
1

For newer versions just use:

<ion-spinner></ion-spinner>

more: ion-spinner

Christian Strang
  • 8,470
  • 5
  • 42
  • 53
  • Can you please explain where this needs to be added? In my controller I have this: $ionicLoading.show({ noBackdrop: true, template: '

    Loading ...

    ' }) I've added this in style.css - .item-icon-left ion-spinner { float: left; margin-left: -3.2em; margin-right: 1em; margin-top: -0.2em; } .spinner svg { width: 28px; height: 28px; stroke: #999; fill: #999; } This only works in a browser but not in an actual android device.     – Mukus Jul 15 '15 at 00:23
1

I had the same issue. The easiest way to resolve:

Delete www/ionic/fonts and www/ionic/scss/ionicons directory.

Then run ionic lib update from your project root directory.

Steve H
  • 19
  • 1
1

i guess it might be about the used version of ionic if it's V5 or if @ionic/angular's version is V5 you need then to use ionicons from version 5 not 4 (they have different names).

Katzura
  • 147
  • 1
  • 4
  • 1
    This helped me. Make sure the `ionicons` version is pinned to your version of `@ionic/angular`. For example, for an `@ionic/angular` project at version 4.x run `npm i ionicons@4` – brianjohnhanna Jun 04 '20 at 15:30