To avoid a third-party dependency and outages

To automatically translate icon names into other languages

A descriptive name identifying the specific icon

A browser extension that injects icons automatically

The plain-English name of the icon, like home

Material Symbols support variable styling like weight and fill

Material Symbols require a paid Google Cloud account

Makes the icon inherit the surrounding text color

Removes the icon's color, making it transparent

Direct styling of the icon's paths using CSS, such as fill and stroke

It tells assistive technology to skip the icon entirely

It makes the icon respond to keyboard focus

The button stops working on touch devices

Screen reader users get no meaningful description of the button's purpose

The browser automatically removes the button from the page

It is required for the icon image to load correctly

So keyboard users can see which control is currently focused

Icons Quiz