Increase thickness of ion-icon - Urgent Please!

Ionic Framework ionic-v3
1

Hi All,

Please let me know how I can increase ion-icon thickness. I’m able to change the size by using font-size. Tried font-weight but did not work

I’m using arrow-forward and arrow-back.

Thanks
Sri

2

@mhartington Does ionic has any function to increase the thickness of all available icon?. I had googled for almost 3-4 days but never found any options.

3

Hi,
try in your css file ion-icon{ font-size: 34px}

4

You can use like @Ludolefrenchy say
using in scss

ion-icon {
  font-size:34px;
}

or directly in html (not recommended)

<ion-icon style="font-size: 34px;" name="remove-circle" color="danger"></ion-icon>
5

I prefer to put everything in the css file in order not to overload the html file.
As you say @pettrin it’s not recommended in the html :wink:

6

Yes, you’re right :wink: !

7

Thanks for your response.

font-size does not change the thickness of the icon. font-size enlarge the size of icon

Eg.
LooksThin

I wanted this to look thicker. Here the icon I have used is checkmark.

8

can give you the code you use.
thank you

9

Please find the code below

<ion-icon name="checkmark" [style.font-size]="'25px'"  [style.color]="'#00a300'"  ></ion-icon>

I wanted to increase the thickness of the checkmark so that coloring is visible.

10

Please let me know if this is possible

11

if the icon is outline, with --ionicon-stroke-width is possible to change it.

2 Likes
12

@bbrenes Thank you very much for this. It works!