Section 50.5 Font and Icons

When writing new CSS, you can use these variables to ensure that your new feature uses the same fonts as the rest of the theme.

Icons for various buttons and controls are provided for by the Google Material Symbols font. PreTeXt includes a copy of this font, in its fonts directory, which HTML output carries in _static/pretext/fonts, so icons appear even when a reader is offline. (With CDN resources, the font comes from Google Fonts.) The copy has just the icons PreTeXt uses (they are listed in fonts/material-symbols-outlined.txt), in one style: optical size 24, weight 400, not filled, grade 0. So a font-variation-settings rule for this font will have no effect, and an icon not in the copy is drawn as its name, in plain text. If you use an icon which is not in the list, run the script fonts/make-material-symbols.py (see fonts/README.md), which finds the icons used in templates, scripts, and stylesheets, and include the new font and list with your changes. To use an icon from this font, add the classes icon material-symbols-outlined to an element (typically a <span> or <i>) and set its content to the name of the icon you want. For example, to get a magnifying glass icon, you would write:

<span class="icon material-symbols-outlined" aria-hidden="true">search</span>

The aria-hidden="true" is important for accessibility, as it tells screen readers to ignore the icon, which is typically decorative and does not convey information on its own. Equivalent information should be provided through other means, such as text labels or ARIA attributes.