Ionic v4 : Icons not showing since update

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

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

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

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 ?

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.

2 Likes

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

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

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