Overview

This components supports all 3 design variants (Outlined, Rounded and Sharp) in additional to the ability to easy configure all axis:

• Fill axis: Fill gives you the ability to modify the default icon style. A single icon can render both unfilled and filled states.
• Weight axis: Weight defines the symbol’s stroke weight, with a range of weights between thin (100) and bold (700). Weight can also affect the overall size of the symbol.
• Grade axis: Weight and grade affect a symbol’s thickness. Adjustments to grade are more granular than adjustments to weight and have a small impact on the size of the symbol.
• Optical Size axis: Ranges from 20dp to 48dp. 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.

Instructions

• Copy the stylesheet from ReferenceTheme into your application's theme. Follow the documentation contained in the stylesheet to get started.
• Use one of the blocks OutlinedSymbol, RoundedSymbol, or SharpSymbol, to display an icon on your application.
• Change the value in the expression inside of the placeholder of the block, in order to select which icon to use.
• For convenience, you can use the static entities provided by the component to use a valid icon identifier. Alternatively, instead of using the static entities, you can write the icon identifier in a string literal. All valid icon identifiers can be found in https://fonts.google.com/icons or also in the Try Now link of the component.