CSS : use Material Icon as ::marker or ::before for li element not working

Question

I am using the Google's Material Icons.

The font is imported like this :

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded&display=block:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

and then a css class :

.material-symbols-rounded {
    font-variation-settings:
    'FILL' var(--fill-icons),
    'wght' 300,
    'GRAD' 200
}

I have some li elements, and I would like to change the default list-style-type and replace the 'disk' with a Material Icon, for instance folder (codepoint : e2c7).

I currently have this :

li::marker {
    font-family: 'Material Icons Rounded';
    content: "\e2c7";
    color: white;
    display: inline-block;
    margin-right: 6px;
}

I have also tried using the ::before pseudo-element, and using ligatures instead of codepoints.

This renders as instead of

Why is it doing that and what can I change to make it work ?

Using Chrome 114

Answer 1

You only have to name the font correctly:

li::marker {
    font-family: 'Material Symbols Rounded';
    content: "\e2c7";
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded&display=block:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

<ul>
  <li></li>
</ul>

Answer 2

I think your problem will be just a miswriting. You wrote 'Material Icons Rounded' as font-family, but it should be 'Material Symbols Rounded'.