Color attribute not applied to custom SVG icon

I have an SVG icon that I’d like to use inside an <ion-icon color="secondary" name="my-custom-icon"></ion-icon> but the secondary color isn’t applied.

I opened up the source code for an ionicon svg and notice that there’s some attributes here I’m guessing ionic uses to color it’s icons dynamically, in particular fill="none" stroke="currentColor":

<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
  <title>Add Circle</title>
  <path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 176v160M336 256H176"/>
</svg>

I exported from SVG from Figma and it has a bunch of fill="black" and fill="white":

<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="69" y="84" width="126" height="309">
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.8228 114.117L159.499 392.021L194.115 380.672L96.5169 84.4307L69.8228 114.117Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.8228 114.117L159.499 392.021L194.115 380.672L96.5169 84.4307L69.8228 114.117Z" fill="black"/>
</g>
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="108" y="19" width="229" height="211">
<path fill-rule="evenodd" clip-rule="evenodd" d="M108.792 204.352L134.257 229.81L336.188 27.8939L295.735 19.4102L108.792 204.352Z" fill="white"/>
</mask>
... removed redunant paths for brevity
</svg>

I tried replacing the fill properties in my custom SVG with currentColor to not avail.

Here’s a stackblitz: https://ionic-angular-v5-vq5hi9.stackblitz.io

image1186×834 22.8 KB

The icon docs cover each case, custom icons & custom colors separately but not how to do both: Ionicons: The premium icon pack for Ionic Framework

I’m guessing this is something I need to tweak at the SVG level for Ionic to be able to color the icon dynamically.

I looked at using shadow-parts css selectors but there is no nested part inside an ion-icon:

image818×370 64.6 KB

1 post - 1 participant

Read full topic