Ionicons not working on Android/iOS devices

ionic-v1
1

Hello !

I have recently started using Ionicons, they work perfectly fine in the browser, but when it comes to Android/iOS devices something is going wrong.

My html file:

  <ion-footer-bar align-title="left" class="bar-balanced">
    <div class="buttons" ng-click="doSomething()">
      <button class="button icon ion-information-circled"></button>
    </div>
  <h1 class="title">Title!</h1>
    <div class="buttons" ng-click="doSomething()">
    <button class="button icon ion-ios-information-outline"></button>
  </div>
</ion-footer-bar>

So:

Browser - icons are shown.
image

iOS - icons are not shown at all.
image

Android: - some weird symbols are shown instead of the icons

image

Since I started using SASS I have restructured my project and I moved some files around (e.g renamed the lib folder to scripts. I guess I am handling that well in my scss file:

$ionicons-font-path: "/scripts/ionic/fonts/" !default;
@import "www/scripts/ionic/scss/ionic";

So any ideas, what could be the reason for Ionicons showing in the browser but not on any of the mobile devices ?

2

You will need to remove the previous $ionic-fonts-path variable, and you probably need to set it to a url relative to the output url (www/css). Thus, you should try setting to one of these three:

  • “scripts/ionic/fonts/”
  • “…/scripts/ionic/fonts/”
  • "www/scripts/ionic/fonts/
3

I’m also seeing this, did you solve it?

4

Yes. Turned out that I was using npm to install the fonts instead of bower. So I had installed the highest version of the ionicons (3.0 I think) where ion-ios-information-outline was invalid. So I just downgrade the version of the ionicons in the bower.json file.

5

I am having a similar issue and icons are not showing only on certain Andriod devices.

On browser, and iOS, they are working fine.

This is what the icons are showing on Samsung Galaxy devices:

16933836_10158384792745691_351736542_n (1)

Any help will be greatly appreciated!