How to Use Material Icons in Your Apps

Material Icons are the official icon set for Google. They follow the Material Design guidelines and depict universal actions, items and concepts used commonly throughout a UI in simple and beautiful forms that are optimized for great display on all common platforms and display resolutions.

The icons are available in a variety of formats and are suitable for different types of projects and platforms, both for developers in their apps as well as designers in their mockups or prototypes. They can be downloaded and incorporated into your applications with ease.

Pairing Material Symbols and Fontweights

To ensure that your icons are consistent with your typography, it is essential to pair them with the correct weights and styles for your content. This is easily achieved by utilizing the Weight customization variable provided in Material Symbols.

Mirroring Android Icons on RTL Devices

If your content is intended for users with a language that has a different layout direction, you need to ensure that any images are mirrored. This can be done by either using specialized assets for RTL languages or by taking advantage of framework functionality to automatically mirror the icons.

When implementing RTL, you should also consider the use of icons with semantic content. This includes numbers, text, images indicating the passage of time and other visual features that may need to be mirrored depending on the specific language.

To make your icons more accessible to screen-reader users, you can place them in a mat-icon> element and mark it with aria-hidden="true". This will allow users with a screen-reader to understand the meaning of your icon without seeing it on screen.