[FIXED] Ionicons not showing after npm installation

Issue

I installed ionicons using npm install --save ionicons so that my package.json updated to:

"dependencies": {
    "ionicons": "^3.0.0"
}

Next, I added the following in my /resources/assets/sass/app.scss:

// Ionicons
@import "node_modules/ionicons/dist/scss/ionicons";

After successfully running npm run dev, I ended up with

/public
    /css
        app.css
    /fonts
        /vendor
            /ionicons
                /dist
                    ionicons.eot
                    ionicons.svg
                    ionicons.ttf
                    ionicons.woff
                    ionicons.woff2

With no errors in the browser console, not a single ionicon (e.g. <i class="icon ion-home"></i>) is showing. I inspected public/css/app.css, and found that it references ionic fonts like so: /fonts/vendor/ionicons/dist/ionicons, which seems to comply with the folder structure above.

I tried adjusting @import, changing url(...) refrences in app.css, moving fonts directory - no luck. Lastly, I tried to reference ionicons through a CDN, and it worked like charm.

What am I doing wrong here? Thanks

Solution

It turns out that I was using the docs for the wrong version of ionicons:

• v2.0.0 ionicons.com
• v3.0.0 ionicframework.com/docs/ionicons

If you install ionicons with NPM as I did, you'll get the latest version; if you clone them from their github repository, you'll get v2.0.0. It turns out that in v3.0.0, many icon classes were removed/changed, hence I couldn't see <i class="icon ion-home"></i>, what a waste of time!

Answered By - Alex