How to apply text-shadow on ha-icon

Hi, I have made my own custom card and I have everything working. The only thing that gives me trouble is to apply certain CSS to the icons I have, namely ‘text-shadow’. I apply the style directly in the CSS of the custom card like this (example):

<span style="text-shadow: 3px 3px 6px black"><ha-icon icon="mdi:play"></ha-icon>test</span>

The text test does have the shadow applied; the icon does not. If I add the style directly to the icon it also does not apply. Is there any way to get this working?