Ionic - showing wrong icon

Question

I am trying incorporate the icons from ionicons.com on my app. I did download of code from github and added to my app, however I have a problem. I define icon class as ion-alert and is show a ion-android-add-circle. That follow for other icons also. See the images:

A snippet of my code where I set icon with ion-alert class

After ionic serve command I get this output:

Answer 1

I got issue when using both from ionicons.com and /docs/ionicons/.
For alert icon, no need to use ionicons.com, use warning icon directly from https://ionicframework.com/docs/ionicons/

 <ion-icon name="warning"></ion-icon>

And remove including of ionicons.min.css on index.html (important)

So you will never have issues of wrong icon.

Answer 2

If not using the Ionic framework, which includes it already, which is i think what vusan's answer is getting at, then Ionicons recommended usage is now:

1. Load its JavaScript in your app or page, https://unpkg.com/[email protected]/dist/ionicons.js
2. Use an ionic web component, <ion-icon name="warning"></ion-icon>

And all is happiness. Definitely better than the old fonts+classes way.