Increase icon size in ionic 2

Ionic Framework ionic-v3
1

How to increase ionic icons in Ionic 2
And how to add custom icons

2

If the icon is inside a button you can use button properties, small or large.

<button primary large>
  <ion-icon name="home"></ion-icon>
</button>

If not (or if you need a custom size), you can use CSS, using the chrome dev tool to inspect the elemnts and check the classes.

For the second question, i don’t know exactly how becouse i never tried but maybe you can reference with this post: https://www.thepolyglotdeveloper.com/2016/03/use-font-awesome-icons-in-your-ionic-2-android-and-ios-app/

Sorry if my english is not perfect.

2 Likes
3

If you mean the size they actually appear on screen the icons are really just a font. Increase the font size on your icon and it will get bigger.

If you want new and different icons, you can use any svg format icon or grab another package of icons grouped as a font like @aluknot suggested. The glyphicon set that comes with bootstrap is another popular choice http://getbootstrap.com/components/

4 Likes
4

Thanks a lot… :smiley:

5

Thanks a lot :smiley:

6

In My case , ion-icon is inside ion-item , it does not increase the size of ion-icon

<ion-item  *ngIf="errCode !=''" large>
           <ion-icon name="close-circle" ></ion-icon>
           <h2> {{mesg}} </h2>
  </ion-item>
2 Likes
7

Try to do like :
<ion-icon name="close-circle" style="zoom:2.0;"></ion-icon>

12 Likes
8

Hello Harinder ,

Thanks for the reply , did not clear understand the change which you did .[quote=“HarinderSingh, post:7, topic:47507”]
<ion-icon name=“close-circle” ></ion-icon>
[/quote]

You have highlighted this line , could not understand the difference .

1 Like
9

Comment edited :slight_smile:

10

yes . zoom worked. thanks


  <ion-icon name="checkmark-circle" style="zoom:4.0;" ></ion-icon>
8 Likes
11 
ion-icon {
        font-size: 30px; //Preferred size here
    }
5 Likes
12

Thanks for that! Completely forgot it’s just a font :laughing: