Ionicons: setting the stroke color

[noorbakerally]

I am using the icon people-outline using the HTML:
<ion-icon name="people-outline" class="overviewIcon" style="color: blue;"></ion-icon>

The color remains black even with the style. How can I change the border color or the fill color of the icon ?

[andreas-aeschlimann]

I can confirm this issue in my Angular project.

Looks like it's different for every icon. For example, menu-sharp does change to white by css while menu doesn't?

[aecvargas]

I can also confirm that I am having this issue in my ionic application project.

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

Some icons seem to work fine but I noticed it when an icon was missing from a page and it turns out that icon had been deleted/renamed so I picked a similar icon to replace it with, attaching the same class to it.

<ion-icon class="arrow" name="chevron-back"></ion-icon>

ion-icon.arrow {
    color: var(--ion-color-default) !important;
    vertical-align: middle;
}

The class above does not seem to work. I even replaced the variable to just the colour red and that did nothing.

It's odd that some icons work as normal and that it was also working before I started using the new version. Would really appreciate a fix on this ASAP.

[andreas-aeschlimann]

Yep...

This issue is probably a duplicate of #778. You can use the CSS property filter to invert the color to white, at least.

[streamliner18]

Need developer attention on this!! Seems like many SVG icons have hard-coded stroke colors which is really annoying..

[zenorocha]

Same here, I can't use it because of this :(

[peterpeterparker]

The problem is the following I think: most outline icons have path defined with fixed stroke:#000;, therefore they are always rendered black.

These should probably be modified with stroke:currentColor;, if I'm not wrong.

I've provided a PR #805 to fix this issue.

[boradakash]

Agree with @peterpeterparker . There are few icons with stroke:#000 because of which the style on ion-icon is not working.

[hades200082]

817 also references this

[Perdixo75]

Try this :

[ionicons] Deprecated script, please remove: <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
To improve performance it is recommended to set the differential scripts in the head as follows:
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

[aPixelInSpace]

Thank you Perdixo75. That fixed the issue for me.

[Rezaul-karim-pstu]

thanks Perdixo75. It works