Article Preview Component with HTML, CSS, JS

Hi.

The reason why you can't change the color of the icon is because you're using background-image and that is not part of the DOM, so you can't manipulate it directly. Fortunately, there are a few workarounds to solve this:

1. Use mask

Mask is a clipped image into specific points.

.my-class {
     mask-image: url(my-image.svg);
     background-color: red;
}

As you can see, we clip the image and set a background color for that image.

I wouldn't recommend this because it doesn't have good browser support (for instance, it doesn't work on IE and edge).

1. Duplicate SVG (better solution)

Create a new SVG image from the original one and change its fill value to #FFF

When you hover the element, just replace the images

.my-class {
    background-image: url(gray-icon.svg)
}

.my-class:hover {
    background-image: url(white-icon.svg)
}

1. Use font icons (best solution)

Instead of using SVG, use font icons like IconMonstr or FontAwesome and treat the icons as fonts

HTML

<i class="my-class im im-fire"></i>

CSS

@import url("https://cdn.iconmonstr.com/1.3.0/css/iconmonstr-iconic-font.min.css");

.my-class {
    color: #333;
}

.my-class:hover {
    color: #fff;
}

I hope it helps.

pay attention to small details(shadows, alignment, font sizing and coloring) btw well done.