Ionic-framework: File to import not found or unreadable: ionicons-icons

[afrad]

ionicons-icons is removed from fonts folder
✗ node_modules\ionic-framework\fonts\ionicons.scss
Error: File to import not found or unreadable: ionicons-icons
....
@import "ionicons-icons";

[brandyscarney]

Are you using v2.0.0-alpha.51?

[afrad]

Yes. I tried also the 2.0 trunk (git+https://github.com/driftyco/ionic.git#2.0) und got the same error

[brandyscarney]

We moved ionicons to a new module, so you'll need to install it in your project and then modify the config file. See the changelog for 2.0: https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#200-alpha51-2016-1-21

[afrad]

Thank you. I did the changes and I dont see the error message anymore but the icons still don't appear.

[mhartington]

Make sure you also include the icons in you package.json and npm install

https://github.com/driftyco/ionic2-app-base/blob/master/package.json#L7

[afrad]

I did installed the icons already. Maybe I missed something.

[brandyscarney]

Which version are you updating from? We renamed the icon element to ion-icon in a previous version, maybe that is causing issues? https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#200-alpha48-2016-1-7

[afrad]

I'm using

 "ionic-framework": "2.0.0-alpha.51",
 "ionicons": "3.0.0-alpha.3",

in my package.json
What is wrong in the code below? I don't see the menu icon

<ion-navbar *navbar>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Test</ion-title>
</ion-navbar>

[brandyscarney]

Hm no that looks right. Can you try stopping ionic serve, then delete the node_modules folder and do a fresh npm install. Then run ionic serve again and see if that fixes it.

https://github.com/driftyco/ionic-conference-app/blob/master/app/pages/about/about.html#L2-L7

[RaphaelYan]

Have you change your ionic.config.js ?

    sass: {
      src: ['app/theme/app.+(ios|md).scss'],
      dest: 'www/build/css',
      include: [
        'node_modules/ionic-framework',
        'node_modules/ionicons/dist/scss'
      ]
    },

[afrad]

Yes I did. Nothing helped except recreating the project from scratch.

[tlancina]

Going to close this as it sounds like it's been resolved, if anyone is still having issues please let us know.

[brandyscarney]

If anyone else runs into this issue make sure the font src is also updated:

src: ['node_modules/ionic-framework/fonts/**/*.+(ttf|woff|woff2)'],

https://github.com/driftyco/ionic-conference-app/blob/master/ionic.config.js#L18

Updated changelog to reflect: https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#ionicons-were-moved

[cayter]

@brandyscarney

I bumped into the same problem when using angular2-webpack-starter. Due to it's using sass-loader with webpack, I had to change the import to:

@import "~ionicons/dist/scss/ionicons-icons";
@import "~ionicons/dist/scss/ionicons-variables";

Note: I'm using NPM >= 3 which will install the packages in flatten structure.

[cayter]

For those who are using Ionic 2 with webpack, please make sure that you have the following changes in webpack config and app SCSS file.

webpack.config.js

...

module: {
  loaders: [
     ...

     {
        test: /\.scss$/,
        loader: 'raw!sass?includePaths[]=' + helpers.root('node_modules/ionicons/dist/scss')
     },

     ...
  ]
},

...

app.scss

$font-path: "~ionic-angular/fonts";

@import "~ionic-angular/ionic";

[palsch]

Hi all,
I am using the current anuglar 2 version with angular-cli@webpack.

In this case I have the same missing file issue and I can't really fix that using webpack, because you don't have access to webpack configuration over angular-cli.

I have found a workaround using cpx inside package.json:

"start": "cpx node_modules/ionicons/dist/scss/ionicons-*.* node_modules/ionic-angular/fonts/ & ng serve --host 0.0.0.0",

But it's not a nice way to solve that.

I am wondering why do you import files without to deliver them?

[jskrzypek]

I'm also seeing this issue in our AOT builds. I'm trying to get around this issue angular/angular/#11688 by precompiling, but then node-sass quits on us because we don't use ionicons. We have $ionicons: false in our scss, but these @imports make it so that we can't use the other fonts in ionic-angular/fonts with our own static compile system.

[RGravesDev]

Hi,
I am using ionic-angular 2.0.0-rc.4 in an angular 2.2.1 project. The only trouble I had was loading the ionicon fonts. The SASS files were not importing them correctly. I copied the font file from node_modules/ionicons/dist/fonts, and placed it into a local folder under my app root. Then I just set a reference to it like this.

$ionicons-font-path: "/assets/fonts/ionicons";
@import "~ionicons/dist/scss/ionicons";

[kaszona]

Remove @import "ionic.ionicons";

Add @import "ionicons";

[brandyscarney]

@kaszona That is not correct. This will import the ionicons stylesheet from here: https://github.com/driftyco/ionicons/blob/master/scss/ionicons.scss

Which in turn pulls in these unwanted styles: https://github.com/driftyco/ionicons/blob/master/scss/_ionicons-font.scss#L15-L27

You should be importing from ionic.ionicons to avoid these styles which grabs this file: https://github.com/driftyco/ionic/blob/master/src/themes/ionic.ionicons.scss

[ionitron-bot[bot]]

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.