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

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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 9
Comments: 33 (11 by maintainers)

Most upvoted comments

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!

jgw96 on Jul 12, 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 May 31, 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 Jun 7, 2018