Ionic-framework: 4.0.0-rc.1 missing ion-icons (with updated webpack config)

Created on 9 Jan 2019 · 18Comments · Source: ionic-team/ionic-framework

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Icons are missing with the following new configuration:

{
  "glob": "**/*.svg",
  "input": "node_modules/ionicons/dist/ionicons/svg",
  "output": "./svg"
}

Expected behavior:
Icons are working

triage

Source

petrot

Most helpful comment

If you cleared your cache and its still not working, see if you have your dev tools open. If so, click the 'disable cache' in there on the network tab and try again. This was the trick for me.

elylucas on 9 Jan 2019

👍3

All 18 comments

can you send your angular.json?

manucorporat on 9 Jan 2019

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    },
    "app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

petrot on 9 Jan 2019

Can you check if node_modules/ionicons/dist/ionicons/svg exists?
Can you check if www/svg is emitted?

I can't reproduce your issue.

Make sure you remove node_module, and npm i again

manucorporat on 9 Jan 2019

node_modules/ionicons/dist/ionicons/svg exist, but www/svg not emitted.

remove node_modules and run npm install again did'nt solve the problem :/

petrot on 9 Jan 2019

👍1

I deleted the www folder, then ran a fresh build. Now the svg folder exists on the www folder. When I run ionic serve, there is an error on the dev toolbar: zone.js:1050 GET http://localhost:8100/svg/md-settings.svg 404 (Not Found) and there are empty icons. But if I copy the svg url and paste it into the browser, the svg appears.

petrot on 9 Jan 2019

It's the same for me. It seems when I open another page that some icons appear... it's weird.

aces-tm on 9 Jan 2019

I cleared cache on Google Chrome and everything worked as expected!

aces-tm on 9 Jan 2019

🎉3

Correct, you have to clear the cache first

paulstelzer on 9 Jan 2019

@aces-tm thanks, worked for me :)

however I think it's necessarry to remove the www folder before a fresh build.

petrot on 9 Jan 2019

Let us summarize:

0) Edit the angular.json like mentioned in the CHANGELOG.md

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
+             {
+               "glob": "**/*.svg",
+               "input": "node_modules/ionicons/dist/ionicons/svg",
+               "output": "./svg"
+             }

1) (Optional) Delete www folder
2) ng serve / ionic serve
3) Clear browser cache

paulstelzer on 9 Jan 2019

👍3

I didn't delete www, just cleared cache...

aces-tm on 9 Jan 2019

Damn, stupid cache! Closing issue! thanks everyone for figuring this out!

manucorporat on 9 Jan 2019

If you cleared your cache and its still not working, see if you have your dev tools open. If so, click the 'disable cache' in there on the network tab and try again. This was the trick for me.

elylucas on 9 Jan 2019

👍3

Clear cache not work for me.

jmdmao on 15 Jan 2019

@jmdmao if you look in another browser that you haven't used before, do they still not show up? That should let you know if its a cache problem or something else.

elylucas on 15 Jan 2019

@jmdmao if you look in another browser that you haven't used before, do they still not show up? That should let you know if its a cache problem or something else.

works based on this suggestion:
https://github.com/ionic-team/ionic/issues/17084#issuecomment-453846690

jmdmao on 15 Jan 2019

@paulstelzer
Delete www folder fixed it for me.
Thanks!

peterennis on 17 Jan 2019

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.