Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Comments:18 (8 by maintainers)

Top GitHub Comments

3reactions

elylucascommented, Jan 9, 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.

3reactions

paulstelzercommented, Jan 16, 2019

Let us summarize:

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"
+             }

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

Top Results From Across the Web

IonIcons in NPM & Webpack - node.js - Stack Overflow

You can import most of the icons as svgs: import {logoTwitter} from "ionicons/icons"; var q = document.querySelector("#blankdiv") q.

angular/angular-cli - Gitter

HI how can i use ionicons in cli project, i am using scss preprocessor i configured same as font awesome but seems its...

react-native-vector-icons - NPM Package Overview - Socket

Missing dependency. Quality. A required dependency is not declared in package.json and may prevent the package from working. Found 2 instances in 1...

signature=66f622bb021bc21706bd834efb86a377,ionic-framework ...

ion-tab, now it returns the name of tab as string. 4.0.0-rc.1 (2019-01-09). Bug Fixes. angular: update @angular/router ...

webpack referenceerror: module is not defined in es module scope ...

I have initialized a new webpack 5 app, the default config file webpack.config.js contains CJS code. If I add "type": "module" to package.json...