Changing Icon Colors in UI Kit (and SVGs in general)

For a new project I’m working on, I’m learning UI Kit; I have never done much in the way of front end development so I’m like a babe in the woods when it comes to CSS Frameworks.

Today’s challenge: Icons. UI Kit includes support for SVG icons. I needed a star on a navbar and UI Kit could give me one. Why not use it?

The UI Kit documentation says “This component injects SVGs into the site, so that they adopt color and can be styled with CSS.”  Problem is it doesn’t offer any details on this, assuming I guess that you know how to style SVGs. I didn’t.

Here’s how to insert a star icon:

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

That worked but it gave me an open star  and I needed a filled star 

Seems like it should be easy enough, right? I tried assigning a color to the class and that worked on the stroke but didn’t fill the star.
In the end I inspected the hollow star (in a browser) and here’s what I found:

<span class="uk-icon" uk-icon="icon:star">
<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>
</span>

OK now we know what we’re aiming at. I’d read a lot of ‘how-to’ posts on dealing with SVGs and they made it seems simple: just use fill: color like this:

.uk-icon { 
fill: yellow; 
}

That didn’t work and it turns out the <polygon> tag of the SVG was mucking things up. So to make a long story slightly less long, here’s the CSS I wound up using. For grins I’m going to give our star a black outline:

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

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

So first (.uk-icon[uk-icon=”icon:star”]) I’m making sure to target just the star icon (I could get more specific in case I need a blue star somewhere else). The first rule points at the svg and assigns the color black to the stroke (ie the outline).

The second rule goes one level deeper and targets the <polygon> tag inside the SVG, and NOW we can set the fill to yellow. And we wind up with this: So there ya have it. Now a few obvious points to address: I could’ve just gone and found a filled star gif or some other svg or used Font Awesome or something, I know. But I learned a lot by spending the time to figure this out.

Second, yeah next thing to figure out is how to align it to the text better. 🙂