CSS icons under Chrome are weirdly displayed

Question

I've added a bullet icon in CSS with the following code: content: "\2022";

Firefox: It works as expected

Chrome: Sometimes, for no particular reason, the icons are not interpreted and are displayed with strange characters instead

Weird behavior

Expected behavior

When doing researches, a lot of people were talking about UTF-8 but when compiled, my app.css is already in UTF-8: @charset "UTF-8"; My HTML file is also in UTF-8: <meta charset="UTF-8">

&::before {
    color: $primary;
    content: "\2022";
    font-size: 1rem;
    padding-right: 1rem;
    position: relative;
    top: 0;
  }

The fact that it happens only sometimes and only under Chrome is something that I don't really understand and I don't know what to look up for.

Is there something I could do to fix this problem ? It's really annoying and the only way to get rid of it it's to clear the cache of the browser.

Thank you !

Answer 1

I have tested content: "\\2022"; and it throws an error. Consider using content: "\2022"; or correcting the question.

Also, try using &bull or &bullet HTML property instead of css.

Hope this helps.