CODEWITHSUNDEEP
ionic-frameworkionicons
GeekSilva
GeekSilva

Reputation: 571

Ionic - showing wrong icon

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 A snippet of my code

After ionic serve command I get this output:After ionic serve command

Upvotes: 1

Views: 1555

Answers (2)

mlncn
mlncn

Reputation: 3366

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.

Upvotes: 0

vusan
vusan

Reputation: 5331

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.

Upvotes: 1

Related Questions