Ionic v4 : Icons not showing since update

Ionic Framework
1

Hello,

I’m upgrading today from a v4beta15 to v4.0.0 using ionic and angular to build a PWA and my ion icons disappeared, leading to 404 request to http://localhost:8100/svg/md-calendar.svg for example no major change has been made except for the version upgrade

Here is my package.json

{
  "name": "app-name",
  "version": "0.0.0",
  "private": true,
  "repository": "",
  "dependencies": {
    "@angular/common": "7.2.1",
    "@angular/compiler": "7.2.1",
    "@angular/core": "7.2.1",
    "@angular/forms": "7.2.1",
    "@angular/http": "7.2.1",
    "@angular/platform-browser": "7.2.1",
    "@angular/platform-browser-dynamic": "7.2.1",
    "@angular/router": "7.2.1",
    "@auth0/angular-jwt": "^2.1.0",
    "@ionic-native/core": "5.0.0-beta.14",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "4.0.0",
    "class-transformer": "^0.2.0",
    "cordova-android": "^6.4.0",
    "cordova-plugin-ionic-webview": "^2.2.0",
    "core-js": "2.5.7",
    "d3-array": "^2.0.2",
    "d3-axis": "^1.0.12",
    "d3-collection": "^1.0.7",
    "d3-scale": "^2.1.2",
    "d3-selection": "^1.3.2",
    "d3-shape": "^1.2.2",
    "d3-time": "^1.0.10",
    "d3-time-format": "^2.1.3",
    "error-stack-parser": "^2.0.2",
    "jsonwebtoken": "^8.4.0",
    "jwt-decode": "^2.2.0",
    "luxon": "^1.7.1",
    "moment": "^2.22.2",
    "query-string": "^6.2.0",
    "reflect-metadata": "^0.1.12",
    "rxjs": "6.2.2",
    "zone.js": "0.8.26"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.12.3",
    "@angular-devkit/core": "7.2.1",
    "@angular-devkit/schematics": "7.2.1",
    "@angular/cli": "7.0.2",
    "@angular/compiler-cli": "7.2.1",
    "@angular/language-service": "~7.0.0",
    "@ionic/schematics-angular": "^1.0.7",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.7.1",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "3.1.6"
  }
}

Thanks in advance,
Max

1 Like
2

Take a look at the breaking changes of 4.0.0-rc.1:

3

Have a look to the Changelog of RC.1 or something I think

Also this has been answered a couple of times on the forum

4

Thanks for your answers this almost solved it, changing the input path of the asset object in angular.json got rid of the 404, svg are retrieved correctly, but this gets stranger, my icons are still invisible in the app!
The svg are valid if i put the request response in a svg file it displays correctly in an svg viewer but all of the icons of my app doesn’t, I tried clearing cache or looking for global styles override but there isn’t… any ideas ?

5

This is in no way a canonical answer, but I had this same problem. To fix it I added this snippet to my angular.json file:

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

I then had to update this for the 4.0 release:

25

Eh, it’s ugly, but it works for me.

7 Likes
6

Are you sure you are not displaying your icons with a color white on a white background or something like that…just saying

7

Thanks @d4h but for me it’s this path “node_modules/ionicons/dist/ionicons/svg” to solve the problem as precised in the rc1 release.
@reedrichards Yep I checked again and there are icons on several backgound colors on buttons ect, in firefox inspector css props of the element include display:block; color:rgb(0,0,0); I tried overidding opacity to 1 or z-index to 9999 or width and height but still nothing would display.

1 Like
8

Maybe you should compare with a blank starter project to figure out where is the difference

Or remove step by step your custom css till you find why it isn’t working

Just some ideas

9

Hi were you able to resolve the issue?

11

@d4h
It may ab ugly, but working for me.
Thank You.

12

Changing the assets line in angular.json to "input": "node_modules/ionicons/dist/ionicons/svg", worked for me as well! Brilliant!