Section 49.5 Font and Icons
css/fonts contains code to set up different font stacks for each theme. These font stacks are rendered into CSS variables:-
--font-body—the font used for the main text -
--font-headings—the font used for headings -
--font-monospace—the font used for code and other monospaced text
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. 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.
