Modify the color of the icon ?

[louisiscoding]

I keep trying to change the colours of my icons via

ion-icon { color: blue; }

They keep appearing black

[tomasSlouka]

I have the same problem ... colour of an icon is possible to change only on SVG itself

[mikekoro]

Seems like its selective. For instance, I can change the colour of <ion-icon name="people-circle-outline"></ion-icon> using css but not <ion-icon name="megaphone-outline"></ion-icon> or <ion-icon name="medal-outline"></ion-icon>

[penhold3r]

Same here, rolling back to 4.5

[0utlandish]

same here, just can change the filled icons color ! so annoying.

[tpuleo]

Same issue with: <ion-icon name="infinite-outline" class="icon-big"></ion-icon> <ion-icon name="stopwatch-outline" class="icon-big"></ion-icon> <ion-icon name="rose-outline" class="icon-big"></ion-icon> <ion-icon name="cart-outline" class="icon-big"></ion-icon>

Using CSS: .icon-big { font-size: 300%; display: block; color: blue; margin-bottom: 10px; }

The other attributes such as font-size change correctly but color does not. Also tried "fill" instead of color and also didn't work.

[hades200082]

Same issue here. Also rolled back to 4.5

[jonathanconway]

Same issue :(

[Abdurahmanm2020]

may be you can try

<ion-icon name="link" color="danger"></ion-icon>

an it might work but i don't know for sure

[tomasSlouka]

may be you can try

<ion-icon name="link" color="danger"></ion-icon>

an it might work but i don't know for sure

yes but what if you want purple icon?

[Abdurahmanm2020]

may be you can try <ion-icon name="link" color="danger"></ion-icon> an it might work but i don't know for sure

yes but what if you want purple icon?

if purple is the color you want then may be look up the purple one or just try to type

<ion-icon name="link" color="purple"></ion-icon>

or the hex

[tomasSlouka]

may be you can try <ion-icon name="link" color="danger"></ion-icon> an it might work but i don't know for sure

yes but what if you want purple icon?

if purple is the color you want then may be look up the purple one or just try to type

<ion-icon name="link" color="purple"></ion-icon>

or the hex

what if you have all of your 100 icons in your application purple and after a week you decide that you want them to be orange.

[Abdurahmanm2020]

may be you can try <ion-icon name="link" color="danger"></ion-icon> an it might work but i don't know for sure

yes but what if you want purple icon?

if purple is the color you want then may be look up the purple one or just try to type <ion-icon name="link" color="purple"></ion-icon> or the hex

what if you have all of your 100 icons in your application purple and after a week you decide that you want them to be orange.

then it will be harder to get it all again but this time orange so when you start get purple, orange, black and all the colors you might want later

[tomasSlouka]

may be you can try <ion-icon name="link" color="danger"></ion-icon> an it might work but i don't know for sure

yes but what if you want purple icon?

if purple is the color you want then may be look up the purple one or just try to type <ion-icon name="link" color="purple"></ion-icon> or the hex

what if you have all of your 100 icons in your application purple and after a week you decide that you want them to be orange.

then it will be harder to get it all again but this time orange so when you start get purple, orange, black and all the colors you might want later

that's why it's better to do it with CSS and not with an element prop.

[Abdurahmanm2020]

may be you can try <ion-icon name="link" color="danger"></ion-icon> an it might work but i don't know for sure

yes but what if you want purple icon?

if purple is the color you want then may be look up the purple one or just try to type <ion-icon name="link" color="purple"></ion-icon> or the hex

what if you have all of your 100 icons in your application purple and after a week you decide that you want them to be orange.

then it will be harder to get it all again but this time orange so when you start get purple, orange, black and all the colors you might want later

that's why it's better to do it with CSS and not with an element prop.

then do the hex colors and it will probably work

[Abdurahmanm2020]

may be you can try <ion-icon name="link" color="danger"></ion-icon> an it might work but i don't know for sure

yes but what if you want purple icon?

if purple is the color you want then may be look up the purple one or just try to type <ion-icon name="link" color="purple"></ion-icon> or the hex

what if you have all of your 100 icons in your application purple and after a week you decide that you want them to be orange.

then it will be harder to get it all again but this time orange so when you start get purple, orange, black and all the colors you might want later

that's why it's better to do it with CSS and not with an element prop.

then do the hex colors and it will probably work

like this <ion-icon name="link" color=" #316956"></ion-icon>

[hades200082]

@Abdurahmanm2020 How does that solve the issue? It's still an element attribute.

CSS allows it to be defined in one place and affect all. Props don't allow that.

[Abdurahmanm2020]

@Abdurahmanm2020 How does that solve the issue? It's still an element attribute.

CSS allows it to be defined in one place and affect all. Props don't allow that.

yes that is right but if you cant do it with css then you take the time to do it with all the Props am I right

[Abdurahmanm2020]

css
ion-icon {
  font-size: 64px;
  color: blue;
  --ionicon-stroke-width: 16px;
}

html
<ion-icon name="heart-outline"></ion-icon>
<ion-icon name="heart"></ion-icon> <!--filled-->
<ion-icon name="heart-outline"></ion-icon> <!--outline-->
<ion-icon name="heart-sharp"></ion-icon> <!--sharp-->
<ion-icon ios="heart-outline" md="heart-sharp"></ion-icon>
<ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>

<ion-icon name="logo-pinterest"></ion-icon>

this works go here

and go here

[Abbas-Codes]

I usually use Font Awesome icons with them you can change the color normally, but there is another way to change the color,

ion-icon{ filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(100deg) brightness(100%) contrast(100%); }

try this

Follow Me

[hades200082]

@Abdurahmanm2020 having an inferior and harder to maintain work-around does not invalidate this issue. It still needs fixing so that ALL icons can be coloured with CSS.

In your example all three of the outline icons fail to show the colour specified in CSS.

We are not looking for a work-around, we are looking for it to be fixed so that CSS can be used in all situations to colour the icons.

@Abbazz2020 That's a slightly better work-around in that it allows it to be managed in one place, but it's not very readable. What colour is that?

I'd suggest that the acceptance criteria for this issue to be resolved would be to allow CSS colour property to be applied correctly to the icons. For outline icons this means applying the CSS colour to the stroke. For filled/normal icons it means applying it to the fill.

The inner SVG elements should also be selectable and colour-able in CSS.

[Abdurahmanm2020]

@Abdurahmanm2020 having an inferior and harder to maintain work-around does not invalidate this issue. It still needs fixing so that ALL icons can be coloured with CSS.

In your example all three of the outline icons fail to show the colour specified in CSS.

We are not looking for a work-around, we are looking for it to be fixed so that CSS can be used in all situations to colour the icons.

@Abbazz2020 That's a slightly better work-around in that it allows it to be managed in one place, but it's not very readable. What colour is that?

I'd suggest that the acceptance criteria for this issue to be resolved would be to allow CSS colour property to be applied correctly to the icons. For outline icons this means applying the CSS colour to the stroke. For filled/normal icons it means applying it to the fill.

The inner SVG elements should also be selectable and colour-able in CSS.

I fixed it

css
**ion-icon {
  font-size: 64px;
  color: blue;
  --ionicon-stroke-width: 16px;
}**

html
<ion-icon name="heart-outline"></ion-icon>
<ion-icon name="heart"></ion-icon> <!--filled-->
<ion-icon name="heart-outline"></ion-icon> <!--outline-->
<ion-icon name="heart-sharp"></ion-icon> <!--sharp-->
<ion-icon ios="heart-outline" md="heart-sharp"></ion-icon>
<ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>

<ion-icon name="logo-pinterest"></ion-icon>

this works go here

and go here

this way you can change the color using CSS so the issue is fixed

Follow me Please !!!

[jongbonga]

One work around (if using ionic) would be to generate a New color (e.g: iconColor) then prop it to your icons

[avramchuk]

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>

[dzpt]

@avramchuk Please update the homepage. I've been searching for hours to get there

[Abbas-Codes]

This here is what you need.

CSS filter generater.

You paste the hex code for the colour you want then when you press Compute filters the filter code will come at the bottom.

Follow me

[samandeggs]

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>

Thanks for this. This worked - however this is clearly unideal as it is not documented, and ionic needs to resolve this.

[Abbas-Codes]

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>

Thanks for this. This worked - however this is clearly unideal as it is not documented, and ionic needs to resolve this.

Are you supposed to drop this in the header of your HTML

[Eebzie]

This isn't a perfect fix, but I used classes to separate the colouring of the ionicon in my header vs the ionicons in the menu links.

/* ===== IONICONS CSS ===== */
.header-button ion-icon{
    font-size: 35px;
    color: white;
}

.nav-link ion-icon {
    font-size: 20px;
}

/* ===== MAIN CSS ===== */
.nav-link{
    display: flex;
    align-items: center;
    color: #606060;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 15px;
}

Note: The .nav-link styling in the main is where the ionicon got its colour from.

Fig 1. The white header button of size 35px

Fig 2. The grey nav links of size 20px (green on hover)

[ivansanchez-oss]

@Abdurahmanm2020 having an inferior and harder to maintain work-around does not invalidate this issue. It still needs fixing so that ALL icons can be coloured with CSS. In your example all three of the outline icons fail to show the colour specified in CSS. We are not looking for a work-around, we are looking for it to be fixed so that CSS can be used in all situations to colour the icons. @Abbazz2020 That's a slightly better work-around in that it allows it to be managed in one place, but it's not very readable. What colour is that? I'd suggest that the acceptance criteria for this issue to be resolved would be to allow CSS colour property to be applied correctly to the icons. For outline icons this means applying the CSS colour to the stroke. For filled/normal icons it means applying it to the fill. The inner SVG elements should also be selectable and colour-able in CSS.

I fixed it

css
**ion-icon {
  font-size: 64px;
  color: blue;
  --ionicon-stroke-width: 16px;
}**

html
<ion-icon name="heart-outline"></ion-icon>
<ion-icon name="heart"></ion-icon> <!--filled-->
<ion-icon name="heart-outline"></ion-icon> <!--outline-->
<ion-icon name="heart-sharp"></ion-icon> <!--sharp-->
<ion-icon ios="heart-outline" md="heart-sharp"></ion-icon>
<ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>

<ion-icon name="logo-pinterest"></ion-icon>

this works go here

and go here

this way you can change the color using CSS so the issue is fixed

Follow me Please !!!

Thanks a lot!

[rhettclinton]

I applied css like this as the class for the ion-icon and it works.

.contact-channel-icon { color: white; --color: white; }