Shadow/outline around ion-icon

Question

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

Should be 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>

And I've tried other formats for the text-shadow, but I'm not getting anything other than the red icon.

Feeling kind of stuck, any help is appreciated!

Answer 1

It looks like ion-icon is using a shadow DOM as to not interfere with other styles. you may be able to access the shadow DOM via JS and edit it directly:

document.querySelector('ion-icon').shadowRoot.childNodes[0].innerText+="path{stroke:black; stroke-width:10})"

That will select the icon, get the first child of its shadowRoot, which is the <style> tag and then add more styles.

Answer 2

I might be too late but I am putting this in case someone else is looking for it. You can use similar method as in this answer to update stylesheets for a shadow-root.

In my case i used

<ion-icon name="add-circle" #addButton></ion-icon>

@ViewChild('addButton', {static: true, read: ElementRef}) addButtonView: ElementRef;

constructor(...) {...}
...
ngAfterViewInit() {
    const cssRule = 'stroke: var(--ion-color-light) !important;' +
        'stroke-width: 1rem;' +
        'stroke-opacity: 1;';
    try {
      const sheet = new CSSStyleSheet();
      // To support Internet Explorer before version 9
      sheet.insertRule ? sheet.insertRule(`svg {${cssRule}}`) : sheet.addRule( `svg`, cssRule);
      this.addButtonView.nativeElement.shadowRoot.adoptedStyleSheets =
          this.addButtonView.nativeElement.shadowRoot.adoptedStyleSheets.concat([sheet]);
    } catch (e) {  // Cannot instanciate CSSStyleSheet in some browsers
      const style = document.createElement('style');
      style.innerHTML = `svg {${cssRule}}`;
      this.addButtonView.nativeElement.shadowRoot.appendChild(style);
    }
}

Answer 3

The CSS filter property works really well for this in modern browsers, without the need for JS. See: https://stackoverflow.com/a/13624469/5063469