Ion-icon - can't see icons

Ionic Framework ionic-v3
1

Hi All,

I am trying to display an icon in a button. However, I am finding a lot of inconsistencies with the icons.

For example, I use the following code:

<button (click)="presentFilterMapModal()" light>Filter&nbsp;<ion-icon class="ion-ios-settings"></ion-icon></button>

As you can see it is using the ion-ios-settings class, and displays the icon successfully. However, when I try use ion-ios-location, no icon is displayed.

<button (click)="presentFilterMapModal()" light>Filter&nbsp;<ion-icon class="ion-ios-location"></ion-icon></button>

How do I set up so I have access to other icons?

ref: http://ionicons.com/cheatsheet.html

2

Hi @richardmarais,

Don’t get your icons from ionicons.com. By and large, they won’t work.

Use this list, and they’ll all work perfectly for you:

Ionic 2 icons

Ryan

3 Likes
3

Ionic Team,

I’d really appreciate it if you could explain how to get ionicons.com’s assets to work natively. Always wondered why it’s only partially implemented. Thanks!!

4

Thanks Ryan,

I tried the examples (e.g. checkmark-circle) on the link you sent, but it still does not display.

<button (click)="presentFilterMapModal()" light>Filter&nbsp;<ion-icon class="checkmark-circle"></ion-icon></button>

Any ideas what I am doing wrong?

Thanks

5

Hey @richardmarais,

The issue is the keyword “class”. Use “name” instead.

<ion-icon name="checkmark-circle"></ion-icon>

If you click on the icon on that page, there’s a really nice cheatsheet that pops up with the necessary code to drop in.

Good luck!
Ryan

6

Thanks Ryan, that works

7

Thanks @richardmarais :grinning: