• Open the ReferenceTheme, and copy the contents into your application. Follow the documentation inside of the ReferenceTheme.
• Drag one of the blocks into your screen: OutlinedSymbol, RoundedSymbol, or SharpSymbol.
• Edit the expression inside of the block to change the icon.
• A list of all icons can be browsed by installing the component's demo.
• For more information, please refer to the official Google documentation here: https://developers.google.com/fonts/docs/material_symbols 

Using the Icons

Using the icons is as simple as bringing the MaterialSymbol Block (found in the GoogleMaterialSymbols module) into your screens. Input parameters of the MaterialSymbol include:

• Symbol (Mandatory) - Text: The name of the icon you're looking to use. The full list of icon names can be referenced here: https://fonts.google.com/icons. Alternatively, the Google Material Symbols Demo app contains the full list of icons as well.
• DesignVariant (Optional): A selection between the Outlined, Rounded and Sharp icon styles. Outlined is selected by default.
• FontVariationSettings (Optional): Enables manual override of axis.4 axis are available to configure
  • Fill: Fill gives you the ability to modify the default icon style. A single icon can render both unfilled and filled states.
    • Options are '1' (filled) or '0' (empty)
  • Weight: Weight defines the symbol's stroke weight. Weight can also affect the overall size of the symbol.
    • Weights range between thin (100) and bold (700).
  • OpticalSize: For the image to look the same at different sizes, the stroke weight (thickness) changes as the icon size scales. Optical Size offers a way to automatically adjust the stroke weight when you increase or decrease the symbol size.
    • Optical Sizes range from 20 to 48
  • Grade: Adjustments to grade are more granular than adjustments to weight and have a small impact on the size of the symbol.
    • Options are Low emphases (-25), Default (0) or High emphasis (200)
• ExtendedClass: Ability to add custom css classes to the icons for further customization.

Customizing the Icons via CSS

For more efficient customisation (especially for a large use case of icons) the icons can be targeted via CSS. By default, all icons have the unique ".os-material-symbol" class attached. Additionally, the ExtendedClass input parameter can be utilized.

An example font variation CSS class can look like this:

.os-material-symbol {
font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0, "opsz" 25;
}

For more information, please refer to the official Google documentation here: https://developers.google.com/fonts/docs/material_symbols