Icons

This project currently references icons from Google fontsopen_in_new specifically, the Material Symbols Rounded fonts.

This page will contain some basic information on how to use the icon classes, and some simple examples to help demonstrate what that will look like. For more technical information, you can refer to the projects README.

Rendering Icons

There are three specific font variations that we can apply to our icons. Please consult with the above linked Google documentation for more information on each property. You can apply modifiers to the icon class to generate the correct font-variation-settings. By default, icons will have the below font-variation-settings:

        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'opsz' 24;
        

These are, respectively, the font fill status (0 here means unfilled, 1 would be filled), the font weight (400 here being the default, 200 being lighter) and optical size (24 is the default, 20 is the alternative).

An icon can only have one font-variation-settings attribute active at any time, but we have classes to cater for all combinations. To use them, you only need the required modifications, those are shown below:

        // the base class, this comes with the defaults outlined above
        .material-symbols-rounded

        // will turn on the icon fill
        .material-symbols-rounded--fill

        // will reduce the font weight
        .material-symbols-rounded--lighter

         // will set the optical size to 20
        .material-symbols-rounded--20
        

As an example, say we want to have an icon that was filled and lighter, we would apply the classes to the icon like so:

    <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--lighter">
        check_circle
    </span>

The output of the above example would be:

The above example also demonstrates how to use the icons. All icons must be inside of a span, and must have the base material-symbols-rounded class. The name of the icon, check_circle in this example, is included as text inside the span. You can find these names either from the Figma design, or by searching the Google documentation.

This may mean that your icons function well with screen readers when used on buttons without the need for extra aria labels, but not in every case, so care should be take to ensure this is considered.

Where an icon is to be used on a :before or :after pseudo element, you can use the code point value that can be found in the Google documentation. For our check_circle example, the code point to use would be e86c. A simplified example of what this looks like in code is shown below. You are able to set font-variation-settings on these elements if you need to fill the icon, for instance.

          :before {
            content: '\e86c';
            font-family: 'Material Symbols Rounded';
            font-variation-settings: 'FILL' 1;
          }