Question 212922 in CSS Question posted in
Some basic documentation can be found here.

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,[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 wierd 'unknown character' unicode box instead of material icon 'folder'

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

Using Chrome 114

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search