We use Material Icons from Google.
If there are any issues with icons, check Material Icons documentation or Google it. E.g. Some icons are missing from the icon font.
Note instead of
<i> we use
<span> to wrap the icons. That’s semantically more correct.
Sizing, states and coloring
These icons were designed to follow the material design guidelines and they look best when using the recommended icon sizes (24px) (For Fannypack we use it mostly at 16px!) and colors.
Icons inherit the style properties, like
font-size, of their parent or ancestors. This makes it a lot easier to use and to control with CSS instead of using extra classes on the icon. But if you need to set a specific color without CSS we’ve got you covered.
The styles below make it easy to apply our recommended sizes, colors, and activity states.
A11y and i18n
With Material Icons the description of the icon is the text in the tag but that’s English only. If you need i18n you need to add attributes and other elements.
When using the icon in a standalone situation, so no other descriptive text or label is available (avoid this at all cost), you need to add
<span class="sr-only"> with the translated description.
aria-hidden="true" will hide the entire tag from screen readers or other assistive technology. Screenreaders will read the content from
.sr-only but that content is visually hidden for regular users.
If the icon has a visible description you only need the
aria-hidden on the icon.
Let’s apply this to a button with a Dutch translation string.