Ionic 4: Ionicons not shown on Android #14509

paulstelzer · 2018-05-21T18:02:39Z

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

The text was updated successfully, but these errors were encountered:

orlyapps · 2018-05-22T11:50:25Z

yep, we got the same problem.

carstenbaumhoegger · 2018-05-23T14:55:31Z

same problem here with Alpha 7!

orlyapps · 2018-05-31T07:03:59Z

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 :)

paulstelzer · 2018-05-31T07:53:40Z

@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.

fifafu · 2018-06-03T12:02:23Z

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>

orlyapps · 2018-06-04T12:08:26Z

@paulstelzer yes it only works in the browser :(

Any updates on this issues? Kinda annoying ;)

paulstelzer · 2018-06-04T12:24:28Z

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

MT-- · 2018-06-07T17:58:13Z

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 ionicons@4.1.2
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)...

paulstelzer · 2018-06-07T18:53:37Z

@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"
              }

MT-- · 2018-06-07T19:07:15Z

@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...

kinggolf · 2018-06-18T06:24:02Z

@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.

paulstelzer · 2018-06-18T07:07:59Z

@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/ionicons@4.2.0/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

kinggolf · 2018-06-18T07:29:55Z

@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!

TomDemulierChevret · 2018-06-26T08:40:40Z

<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.

matheusdavidson · 2018-06-26T20:28:29Z

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

matheusdavidson · 2018-06-27T13:34:22Z

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 · 2018-06-27T13:35:06Z

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

matheusdavidson · 2018-07-05T04:59:47Z

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.

jgw96 · 2018-07-12T15:37:34Z

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/angular@4.0.0-alpha.10 --save-exact) and then run these two commands ionic cordova plugin rm cordova-plugin-ionic-webview ionic cordova plugin add cordova-plugin-ionic-webview@2.0.0-beta.1 . Thanks!

matheusdavidson · 2018-07-31T02:28:42Z

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 · 2018-07-31T03:00:25Z

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

matheusdavidson · 2018-07-31T03:37:03Z

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

rohitkrishna12 · 2018-08-03T00:02:29Z

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

paulstelzer · 2018-08-03T06:33:31Z

@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 )

rohitkrishna12 · 2018-08-03T22:23:07Z

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

TakkuzOld · 2018-08-13T18:33:15Z

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.

netsesame2 · 2018-08-15T16:05:00Z

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"
  }

paulstelzer · 2018-08-30T10:28:39Z

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!

siva563 · 2018-09-10T09:19:15Z

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 · 2018-09-10T09:19:40Z

@paulstelzer could you please help out this issue

paulstelzer · 2018-09-10T09:53:19Z

Upload a repository and I can check

carstenbaumhoegger · 2018-09-10T10:35:02Z

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 👍

ionitron-bot · 2018-10-10T10:42:19Z

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.

ionitron-bot bot added the triage label May 21, 2018

MT-- mentioned this issue Jun 8, 2018

Ionicons v4 - Web Component Testing ionic-team/ionicons#499

Closed

kinggolf mentioned this issue Jun 18, 2018

V4 Ion-Navbar throws error #14635

Closed

matheusdavidson mentioned this issue Jun 26, 2018

IONIC v4: Icon won't work in android ionic-team/ionicons#572

Closed

jgw96 closed this as completed Jul 12, 2018

paulstelzer mentioned this issue Jul 13, 2018

Ionicons not showing up when using in Cordova Environment ionic-team/ionicons#552

Closed

ionitron-bot bot locked and limited conversation to collaborators Oct 10, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ionic 4: Ionicons not shown on Android #14509

Ionic 4: Ionicons not shown on Android #14509

paulstelzer commented May 21, 2018 •

edited

orlyapps commented May 22, 2018

carstenbaumhoegger commented May 23, 2018

orlyapps commented May 31, 2018

paulstelzer commented May 31, 2018 •

edited

fifafu commented Jun 3, 2018 •

edited

orlyapps commented Jun 4, 2018

paulstelzer commented Jun 4, 2018 •

edited

MT-- commented Jun 7, 2018

paulstelzer commented Jun 7, 2018 •

edited

MT-- commented Jun 7, 2018

kinggolf commented Jun 18, 2018

paulstelzer commented Jun 18, 2018 •

edited

kinggolf commented Jun 18, 2018

TomDemulierChevret commented Jun 26, 2018

matheusdavidson commented Jun 26, 2018

matheusdavidson commented Jun 27, 2018

matheusdavidson commented Jun 27, 2018

matheusdavidson commented Jul 5, 2018

jgw96 commented Jul 12, 2018

matheusdavidson commented Jul 31, 2018

matheusdavidson commented Jul 31, 2018

matheusdavidson commented Jul 31, 2018 •

edited

rohitkrishna12 commented Aug 3, 2018 •

edited

paulstelzer commented Aug 3, 2018

rohitkrishna12 commented Aug 3, 2018 •

edited

TakkuzOld commented Aug 13, 2018

netsesame2 commented Aug 15, 2018 •

edited

paulstelzer commented Aug 30, 2018 •

edited

siva563 commented Sep 10, 2018

siva563 commented Sep 10, 2018

paulstelzer commented Sep 10, 2018

carstenbaumhoegger commented Sep 10, 2018

ionitron-bot bot commented Oct 10, 2018

Ionic 4: Ionicons not shown on Android #14509

Ionic 4: Ionicons not shown on Android #14509

Comments

paulstelzer commented May 21, 2018 • edited

Bug Report

orlyapps commented May 22, 2018

carstenbaumhoegger commented May 23, 2018

orlyapps commented May 31, 2018

paulstelzer commented May 31, 2018 • edited

fifafu commented Jun 3, 2018 • edited

orlyapps commented Jun 4, 2018

paulstelzer commented Jun 4, 2018 • edited

MT-- commented Jun 7, 2018

paulstelzer commented Jun 7, 2018 • edited

MT-- commented Jun 7, 2018

kinggolf commented Jun 18, 2018

paulstelzer commented Jun 18, 2018 • edited

kinggolf commented Jun 18, 2018

TomDemulierChevret commented Jun 26, 2018

matheusdavidson commented Jun 26, 2018

matheusdavidson commented Jun 27, 2018

matheusdavidson commented Jun 27, 2018

matheusdavidson commented Jul 5, 2018

jgw96 commented Jul 12, 2018

matheusdavidson commented Jul 31, 2018

matheusdavidson commented Jul 31, 2018

matheusdavidson commented Jul 31, 2018 • edited

rohitkrishna12 commented Aug 3, 2018 • edited

paulstelzer commented Aug 3, 2018

rohitkrishna12 commented Aug 3, 2018 • edited

TakkuzOld commented Aug 13, 2018

netsesame2 commented Aug 15, 2018 • edited

paulstelzer commented Aug 30, 2018 • edited

siva563 commented Sep 10, 2018

siva563 commented Sep 10, 2018

paulstelzer commented Sep 10, 2018

carstenbaumhoegger commented Sep 10, 2018

ionitron-bot bot commented Oct 10, 2018

paulstelzer commented May 21, 2018 •

edited

paulstelzer commented May 31, 2018 •

edited

fifafu commented Jun 3, 2018 •

edited

paulstelzer commented Jun 4, 2018 •

edited

paulstelzer commented Jun 7, 2018 •

edited

paulstelzer commented Jun 18, 2018 •

edited

matheusdavidson commented Jul 31, 2018 •

edited

rohitkrishna12 commented Aug 3, 2018 •

edited

rohitkrishna12 commented Aug 3, 2018 •

edited

netsesame2 commented Aug 15, 2018 •

edited

paulstelzer commented Aug 30, 2018 •

edited