Ionic-framework: Ionic 4: Ionicons not shown on Android

Created on 21 May 2018 · 33Comments · Source: ionic-team/ionic-framework

Bug Report

Ionic Info

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

global packages:

   cordova (Cordova CLI) : 8.0.0

local packages:

   @angular-devkit/core       : 0.6.0
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.1
   @ionic/schematics-angular  : 1.0.0-rc.5
   Cordova Platforms          : android 7.1.0
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

Describe the Bug
The ionicons are not shown on Android when using Ionic 4 (and so Iconicons 4.x). In console you can see the error message: "Fetch API cannot load file:///android_asset/www/svg/md-arrow-forward.svg. URL scheme "file" is not supported."

Steps to Reproduce / Related Code
Just use the Ionic Conference App (Branch: core-update - https://github.com/ionic-team/ionic-conference-app) let it run on Android (ionic cordova run android)

Expected Behavior
THe icons should show

triage

Source

paulstelzer

👍9

Most helpful comment

Hello all! This has been fixed with the latest versions of Ionic and our new beta version of the webview plugin. To get the fix first make sure you have the latest version of ionic 4 (npm install @ionic/[email protected] --save-exact) and then run these two commands ionic cordova plugin rm cordova-plugin-ionic-webview ionic cordova plugin add [email protected]. Thanks!

jgw96 on 12 Jul 2018

👍3

All 33 comments

yep, we got the same problem.

orlyapps on 22 May 2018

same problem here with Alpha 7!

carstenbaumhoegger on 23 May 2018

I added this snippet in the angular.json file

 {
    "glob": "**/*.svg",
    "input": "node_modules/@ionic/angular/dist/ionic/svg",
    "output": "./svg"
 },

and used ng serve instead of ionic serve
Now it works :)

orlyapps on 31 May 2018

👍2

@orlyapps what you descripe is only working in browsers, but not as native android app, isn't it? BTW is that the normal integration of Ionic icons which is used in Ionic Conference App, too.

paulstelzer on 31 May 2018

I'm also seeing this issue on alpha 7.
Using the ios icons for android is working

 <ion-icon
   ios="ios-wifi"
   md="ios-wifi"
   slot="start">
</ion-icon>

fifafu on 3 Jun 2018

@paulstelzer yes it only works in the browser :(

Any updates on this issues? Kinda annoying ;)

orlyapps on 4 Jun 2018

Think using the Ionicons font (instead of svgs directly) is at the moment the only choice to use the icons on Android

paulstelzer on 4 Jun 2018

Since Ionicons v4.1.2 was released, here is my quick setup that piggybacks on @orlyapps's fix (still just browser currently: I've never gotten any icons to load on Alpha 7 so this is a huge improvement for me):

yarn add [email protected]
add mapping to assets array in angular.json at project root
- projects.<your_app>.architect.build.options.assets

{
  "glob": "**/*.svg",
  "input": "node_modules/ionicons/dist/ionicons/svg",
  "output": "./svg"
}

ng serve

I wish that were more helpful, but at least it's up-to-date(ish)...

MT-- on 7 Jun 2018

@MT-- Why so complicated? If you just want to use ionicons on browser, this is already included in @ionic/angular. You only have to integrate the following lines into your angular.json (you don't need to add ionicons because its already included with @ionic/angular)

So you only need to add the following:

              {
                "glob": "**/*.svg",
                "input": "node_modules/@ionic/angular/dist/ionic/svg",
                "output": "./svg"
              }

paulstelzer on 7 Jun 2018

👍1

@paulstelzer it relies on ionicons seperately from @ionic/angular since they were updated recently... and Alpha 7 is 3 weeks old... I also mentioned that I have never seen the icons in the browser until I did that...

MT-- on 7 Jun 2018

@MT-- & @paulstelzer I've spent some time now updating a very old Ionic app (ionic-angular: 2.0.1) to Ionic V4 and it all seems to be working very nicely but I cannot display the arrow-back icon in toolbar when building to Android phone:

ionic cordova run android --prod --aot

The app navigates OK, but arrow-back does not display and I see same error as @paulstelzer reported here.

To upgrade this app I started with a completely new V4 project:

ionic start myApp blank --type=angular

& moved my files over/updated from the old project.

angular.json already included:

              {
                "glob": "**/*.svg",
                "input": "node_modules/@ionic/angular/dist/ionic/svg",
                "output": "./svg"
              }

but even if I used:

              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }

still no luck. All of these files are valid in the project node_modules.

The app works fine in browser with ionic serve, but not with build Android. I have not tried Ios.
Any other recommendations? @paulstelzer can you now build Ionicons V4 to Android device? Thanks.

kinggolf on 18 Jun 2018

@kinggolf If you really need ionicons, you have (at the moment) use the ionicons font. Either integrate the font into your app or just insert the following in your index.html

<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">

Now you can write <i class="icon ion-md-heart"></i> With this in mind, you can write you own component and make ionicons work again as expected for Android and iOS ;)

But if you can wait, then it's the best thing to wait because the ionic team will fix it with the official release of ionic 4

paulstelzer on 18 Jun 2018

@paulstelzer Thank you. I only need the arrow-back in the toolbar used by <ion-back-button> in Ionic 4. The app uses AngularFire2 and it has breaking changes between its latest version w/ Angular 6.x vs Angular 5.x. I will need to evaluate trade-offs between going back to Ionic 3/Angular 5 and your suggestion. I only started this upgrade project as an evaluation of Ionic 4, but now it's looks so good, with exception of back button, I am considering just going for a new release with Ionic 4.
I love Ionic and really appreciate what the team there has done, but I'm concerned now about when Ionic 4 will be officially released. Thanks again & cheers!

kinggolf on 18 Jun 2018

<ion-tab-button class="tab-button tab-button-md has-icon has-icon-only hydrated tab-selected" role="tab" id="tab-t-0-0" aria-selected="true">
  <a href="/tabs/(home:home)" class="tab-cover">
    <ion-icon class="tab-button-icon icon icon-md hydrated" role="img" aria-label="home">
      <div class="icon-inner">
      </div>
    </ion-icon>
    <ion-ripple-effect class="hydrated"></ion-ripple-effect>
  </a>
</ion-tab-button>

The issue is present on Android for the tabs starter as well.
The svg element that's supposed to be inside <div class="icon-inner"></div> is not even created.
It does work on serve.

TomDemulierChevret on 26 Jun 2018

Same here, works on IOS but not on android.
This is a big problem for people upgrading to Ionic 4 :/

matheusdavidson on 26 Jun 2018

Does anyone have a workaround? This is my info:

cli packages: (/Users/matheusdavidson/.nvm/versions/node/v9.10.1/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

global packages:

   cordova (Cordova CLI) : 7.1.0

local packages:

   @angular-devkit/core       : 0.6.0
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.1
   @ionic/schematics-angular  : 1.0.0-rc.6
   Cordova Platforms          : android 6.3.0
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 1.9.2
   NodeJS            : v9.10.1
   npm               : 5.8.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.3 Build version 9E145

Environment Variables:

   ANDROID_HOME : /Users/matheusdavidson/Library/Android/sdk/

matheusdavidson on 27 Jun 2018

Tried to use another webview(crosswalk) but no luck =/

matheusdavidson on 27 Jun 2018

The icons won't show on ios or android devices because of: ionic-team/ionicons#552

Fetch API cannot load file:///android_asset/www/svg/md-add-circle.svg. URL scheme "file" is not supported.

Had to make a production(--prod) build to see that error.

matheusdavidson on 5 Jul 2018

jgw96 on 12 Jul 2018

👍3

Hey @jgw96, the problem is still present in the latest beta. I have just installed ionic beta 0, generated a new app and build to device, icons still not displayed. Tried to uninstall ionic-webview, which was 2.0.1, installed it again(2.0.2) and tried to build to android, nothing.

matheusdavidson on 31 Jul 2018

sorry, it works, the problem was my version of cordova-android which was under 6.4

matheusdavidson on 31 Jul 2018

icons now work with latest cordova-android but sometimes, after navigation they doesn't, is intermittent now

matheusdavidson on 31 Jul 2018

@jgw96 icons are still not being displayed in android. Works when run the app using ng serve i browser #

rohitkrishna12 on 3 Aug 2018

@rohitkrishna12 It's working. Please make sure to use the latest ionic webview cordova plugin (See Migrating to 2.x https://github.com/ionic-team/cordova-plugin-ionic-webview )

paulstelzer on 3 Aug 2018

_UPDATE:_

i updated the android to 8 and the icons are working. it would be nice if ionic shows the base android api support.

@paulstelzer i tried updating the webview cordova plugin as suggested in the link. i used side menu as a starter template for the project. i tried tabs and it same issue.
Here is my package.json

`{
  "name": "ExpenseTracker",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "6.0.9",
    "@angular/core": "6.0.9",
    "@angular/forms": "6.0.9",
    "@angular/http": "6.0.9",
    "@angular/platform-browser": "6.0.9",
    "@angular/platform-browser-dynamic": "6.0.9",
    "@angular/router": "6.0.9",
    "@ionic-native/core": "5.0.0-beta.14",
    "@ionic-native/ionic-webview": "^5.0.0-beta.11",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/sqlite": "^5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "4.0.0-beta.0",
    "@ionic/ng-toolkit": "1.0.0",
    "@ionic/pro": "2.0.3",
    "@ionic/schematics-angular": "1.0.1",
    "@ionic/storage": "^2.1.3",
    "cordova-android": "7.0.0",
    "cordova-browser": "5.0.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.0.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.3.3",
    "core-js": "^2.5.3",
    "g": "^2.0.1",
    "ionic": "^4.0.3",
    "rxjs": "6.2.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.8",
    "@angular/compiler": "6.0.9",
    "@angular/compiler-cli": "6.0.9",
    "@angular/language-service": "6.0.9",
    "@angular-devkit/architect": "0.7.0-rc.3",
    "@angular-devkit/build-angular": "0.7.0-rc.3",
    "@angular-devkit/core": "0.7.0-rc.3",
    "@angular-devkit/schematics": "0.7.0-rc.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.5.2",
    "codelyzer": "~4.4.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.7.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-ionic-webview": {}
    },
    "platforms": [
      "browser",
      "android"
    ]
  }
}`

And here is the output In Android

On Browser

rohitkrishna12 on 4 Aug 2018

I still have the same problem.

Fresh installation of Ionic v4:

"cordova": "8.0.0"
"cordova-android": "7.0.0"
"cordova-plugin-ionic-webview": "^2.0.2"
"@ionic/angular": "^4.0.0-beta.0"

Ionicons package v4.3.0

<ion-icon name="arrow-dropdown"></ion-icon> is not showing anything on Android but it's working on browser.

Takkuz on 13 Aug 2018

I use capacitor, run on real device, android 7, no icon can be shown.

Ionic:
   ionic (Ionic CLI)          : 4.0.6 (D:\Program Files\nodejs\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

"dependencies": {
    "@angular/animations": "^6.1.2",
    "@angular/common": "^6.1.2",
    "@angular/core": "^6.1.2",
    "@angular/forms": "^6.1.2",
    "@angular/http": "^6.1.2",
    "@angular/platform-browser": "^6.1.2",
    "@angular/platform-browser-dynamic": "^6.1.2",
    "@angular/router": "^6.1.2",
    "@capacitor/android": "^1.0.0-beta.4",
    "@capacitor/cli": "^1.0.0-beta.4",
    "@capacitor/core": "^1.0.0-beta.4",
    "@ionic-native/core": "5.0.0-beta.14",
    "@ionic-native/file-opener": "^5.0.0-beta.14",
    "@ionic-native/screen-orientation": "^5.0.0-beta.14",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/sqlite": "^5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "4.0.0-beta.2",
    "@ionic/core": "^4.0.0-beta.2",
    "@ionic/ng-toolkit": "1.0.0",
    "@ionic/schematics-angular": "1.0.1",
    "@ionic/storage": "^2.1.3",
    "com.lampa.startapp": "^6.1.6",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.0.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.7",
    "rxjs": "6.2.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "^0.8.26"
  }

netsesame2 on 15 Aug 2018

I tested it again with the following packages

"dependencies": {
...
"@ionic/angular": "^4.0.0-beta.6",
"cordova-android": "7.1.1",
"cordova-plugin-ionic-webview": "^2.1.0",
...
}

and it works like a charm on ANDROID!

UPDATE: Also working without problems on iOS!

paulstelzer on 30 Aug 2018

it is nor working for me

"cordova-plugin-ionic-webview": "^2.1.0",

"@ionic/angular": "4.0.0-beta.8",
"cordova-android": "7.0.0",

It is working fine on browser but it not working real device

siva563 on 10 Sep 2018

@paulstelzer could you please help out this issue

siva563 on 10 Sep 2018

Upload a repository and I can check

paulstelzer on 10 Sep 2018

I've checked this issue again with updated dependencies as suggested and it's working for me too.
Tested it on Google Pixel 2 and iPhone X 👍

carstenbaumhoegger on 10 Sep 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.