0

How can I change the color of an UIkit icon. I am using react components. Specifically, I want to change the color of the divider icon: https://getuikit.com/docs/divider

I have tried most of the answer in this question: Can I change the color of Font Awesome's icon color? None of them worked.

I also tried wrapping it in tags or 

<i style={{color: 'rgba(0, 0, 0, 1)'}} className="uk-divider-icon"></i>
<div style={{color: 'rgba(0, 0, 0, 1)'}} className="uk-divider-icon"></div>

I want to change the color of the icon itself not background or other css, as these are easy to change using style.

Thanks.

deann
  • 756
  • 9
  • 24

3 Answers3

6

Underneath the icon system lies the svg inserted into a tag, so you just style the svg. 

.span[uk-icon=*] svg{
    color:black;
}

.span[uk-icon=*] svg path{
    fill: green;
}

Of course you can simply add your own class to an element containing uk-icon to be more specific.

cssBlaster21895
  • 3,670
  • 20
  • 33
1

A little bit late, but might help new ones here!

Using uikit documentation format:

  <div class="rounded-button">
     <span uk-icon="plus"></span>
  </div>

And my .scss:

.rounded-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  
    span{
     color: white;
    }
}
blackgreen
  • 34,072
  • 23
  • 111
  • 129
Agustin L. Lacuara
  • 199
  • 2
  • 11
0

Here's another example, I'm using the Star icon:

HTML:

<span class="uk-icon" uk-icon="icon:star"></span>

If you inspect this you'll see it expands to this:

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="star"><polygon fill="none" stroke="#000" stroke-width="1.01" points="10 2 12.63 7.27 18.5 8.12 14.25 12.22 15.25 18 10 15.27 4.75 18 5.75 12.22 1.5 8.12 7.37 7.27"></polygon></svg>

So for example to make a star with black outline and yellow fill:

.uk-icon[uk-icon="icon:star"] svg {
    color: black;
}

.uk-icon[uk-icon="icon:star"] svg polygon{
    fill: yellow;
}

I'm just figuring this stuff out so if I've made an error I hope someone will correct me, but this seems to be working for me.

Pete Smith
  • 113
  • 4