Тень / контур вокруг иона-значка

Question

Я пытаюсь получить сплошную границу вокруг цветной иконки.

Должно быть достаточно простым, и, видимо, оно работает нормально для глификонов, но я не могу заставить его работать на <ion-icon>

Я пытался ...

<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/

Или ...

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

И я попробовал другие форматы для text-shadow, но я не получаю ничего, кроме красного значка.

Чувствуя себя застрявшим, любая помощь приветствуется!

Answer 1

Похоже, что ion-icon использует теневой DOM, чтобы не мешать другим стилям. Вы можете получить доступ к теневой DOM через JS и редактировать его напрямую:

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

Это выберет значок, получит первого потомка его shadowRoot, который является тегом <style>, а затем добавит больше стилей.