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

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,GRAD@20..48,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

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,GRAD@20..48,100..700,0..1,-50..200" />

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