# Ionic v4 : Icons not showing since update

**URL:** <https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460>\
**Category:** Ionic Framework\
**Created:** [January 28, 2019, 4:28pm UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460 "2019-01-28T16:28:39Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![maxg86](https://avatars.discourse-cdn.com/v4/letter/m/eada6e/32.png) [@maxg86](https://forum.ionicframework.com/u/maxg86)\
**Post date:** [January 28, 2019, 4:28pm UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460/1 "2019-01-28T16:28:39Z")

</div>

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](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

```auto
{
  "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

---

<div class="post-metadata">

**Author:** ![pwespi](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@pwespi](https://forum.ionicframework.com/u/pwespi)\
**Post date:** [January 28, 2019, 4:39pm UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460/2 "2019-01-28T16:39:56Z")

</div>

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

> <https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md>

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [January 28, 2019, 4:40pm UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460/3 "2019-01-28T16:40:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maxg86](https://avatars.discourse-cdn.com/v4/letter/m/eada6e/32.png) [@maxg86](https://forum.ionicframework.com/u/maxg86)\
**Post date:** [January 29, 2019, 4:21pm UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460/4 "2019-01-29T16:21:09Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![d4h](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/d4h/32/123753_2.png) [@d4h](https://forum.ionicframework.com/u/d4h)\
**Post date:** [January 29, 2019, 4:29pm UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460/5 "2019-01-29T16:29:26Z")

</div>

This is in no way a canonical answer, but I had this same problem. To fix it I added [this snippet](https://github.com/ionic-team/ionic/issues/14509#issuecomment-393429870) to my angular.json file:

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

```

I then had to update this for the 4.0 release:

![25](https://global.discourse-cdn.com/ionicframework/original/3X/7/9/793cb323df0467bfc44ff3aaf46591b03e07a604.png)

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

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [January 29, 2019, 4:48pm UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460/6 "2019-01-29T16:48:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maxg86](https://avatars.discourse-cdn.com/v4/letter/m/eada6e/32.png) [@maxg86](https://forum.ionicframework.com/u/maxg86)\
**Post date:** [January 29, 2019, 5:31pm UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460/7 "2019-01-29T17:31:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [January 29, 2019, 6:18pm UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460/8 "2019-01-29T18:18:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sritu](https://avatars.discourse-cdn.com/v4/letter/s/ed8c4c/32.png) [@Sritu](https://forum.ionicframework.com/u/Sritu)\
**Post date:** [October 23, 2019, 5:43pm UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460/9 "2019-10-23T17:43:41Z")

</div>

Hi were you able to resolve the issue?

---

<div class="post-metadata">

**Author:** ![azharalikasuri](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/azharalikasuri/32/131607_2.png) [@azharalikasuri](https://forum.ionicframework.com/u/azharalikasuri)\
**Post date:** [April 22, 2020, 3:53am UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460/11 "2020-04-22T03:53:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gnowland](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnowland/32/127428_2.png) [@gnowland](https://forum.ionicframework.com/u/gnowland)\
**Post date:** [September 14, 2020, 1:45pm UTC](https://forum.ionicframework.com/t/ionic-v4-icons-not-showing-since-update/154460/12 "2020-09-14T13:45:59Z")

</div>

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