Icon problem ________chevron

Hello guys, I am in the ultimate html/css part 3. In this part I have faced some issue with collapsible part.

When I replace chevron icon format in html it fully filled with primary color.

What is solution for this issue?

1 Like

I haven’t seen that course in a while so not sure what video it is. Can you share with a CodePen?

I don’t have account in codepen

I was facing the exact same issue when I was doing the course a few months back, what you have to do to fix it is just download the project file from the video (in the course) and at the bottom will be a .zip file attached, all you got to do is extract it and grab the chevron.svg and replace it in your vscode project file or just the folder. Hope this helps!


Thank you bro,it’s work

You’re welcome, friend

1 Like

sprite file doesn’t have the fill property for circle.
So add the fill property like this
circle cx=“25.5” cy=“25.5” r=“25.5” fill=“#393939


The Best Solution!
Thanks Dear Friend

1 Like

It worked, thank you so much.

I also had problems with the background it wouldn’t show up like mosh it was a white background so i made a new class on the span (icon-container) instead of deleting it and added this into the CSS.

.icon-container__broke {
background: #333;
width: 64px;
height: 64px;
border-radius: 100%;
display: inline-flex;
justify-content: center;
align-items: center;


This was the answer i was looking for!

where to apply this attribute fill=“#393939” I tried in the sprite.svg file in the circle tag but it didn’t work

You can apply it by going to your sprite.svg file on vs code, and write the fill=“#393939” property on the chevron section, like the one in this picture :slight_smile:


You are a lifesaver!! Thanks.