3

I am using ion-icon as

.html

<ion-icon name="ios-thumbs-up-outline" [style.color]="'#EF3B51'"></ion-icon>

When I do this the icon's outline changes to red color but I want to fill red color in the empty space inside the icon.

You can see the image below:

enter image description here

Aditya
  • 2,358
  • 6
  • 35
  • 61
  • is there a reason for not using the solid thumb icon v/s outlined one, and adding color red style to it? – Sunil Kumar Mar 08 '18 at 06:05
  • you may try this to edit vector fill outlined icons https://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694 – Sunil Kumar Mar 08 '18 at 06:08
  • @SunilKumar Yes If I dont click on like button then It should look similar to the ios-thumbs-up-outline and If I use md-thumbs-up then I had to make similar to ios-thumbs-up-outline using the same questions. – Aditya Mar 08 '18 at 06:13
  • I m not using svgs here, if would appreciate if i would be done using ion-icons – Aditya Mar 08 '18 at 06:14

1 Answers1

7

this will resolve the issue

<ion-icon name="ios-thumbs-up" [style.color]="'#EF3B51'"></ion-icon>

what ever available in the link is what you can use if you need anything else you need to use image

Mohan Gopi
  • 7,606
  • 17
  • 66
  • 117