Icons not working


HI. I’m trying to get some icons to display in a footer. Looking at the docs here I should just have to insert
<icon heart></icon>
to display a heart icon. This isn’t working. I’m getting nothing. I have downloaded and added; using bower the ionicons from ionicons.com. These are working but there are some other icons on the ionic.io website that I’d like to use. I can’t get these to load and the docs say to use the icon tag like above.

Any ideas how to get these working in my app please??



You tagged your question as ionic not “ionic 2”, so just to check you’re not trying to use ionic 2 syntax with ionic 1, right?


I am able to see the heart icon in a v2.0-alpha.45 app using this syntax. If you are trying to use a v1.0 app please use the syntax here:

<i class="icon ion-heart"></i>
<i class="icon ion-ios-heart"></i>

You can check your version by running ionic info from within the project folder. If this is a v2 error, let me know.


Can someone provide guidance on how to implement cross-platform icons using the v1.0 syntax? For example, how would you show the Android download icon on Android (md-download) and ios download icon on iOS? (ios-download). My current solution is to use the ionic.Platform service and do ng-show/ng-hide logic. Many thanks in advance.


Trying to create a login page with icons and input boxes along side a login button , this was what I used, very simple only after you have figured it out.

<ion-content padding>
<h2> Welcome to Your APP</h2>
     <ion-icon name="person"></ion-icon>
	<ion-input type="text" placeholder="Username">

    <ion-icon name="lock"></ion-icon>
	<ion-input type="password" placeholder="Password">
<button ion-button icon-left full>