Shadow/outline around ion-icon

Ionic Framework
1

Long time googler, first time poster.

I’m trying to get a solid border around a colored icon.

Seems straight-forward enough, and apparently it works ok for glyphicons, but I can’t get it to work for <ion-icon>

I’ve tried…

<ion-icon [name]="'heart'" style="font-size: 25px; color: #d00; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;"></ion-icon>

// like this fiddle: http://jsfiddle.net/9suc171t/1/

Or…

<ion-icon [name]="'heart'" style="font-size: 25px; color: #d00; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);"></ion-icon>

Feeling kind of stuck, any help is appreciated!

2

The Ion-Icons are not fonts like glyphicons, so that is why your approach is not working. Ion-icons are svgs, so the styling is different (there is no font-size to adjust). If you don’t need dynamic styling, or just a few options it might easier to take the svg copy it and create new versions as reference them by the src attribute instead.