Material Symbols
md-gb-icon axes: optical size, weight, fill and grade.
Each variable font axis of md-gb-icon is a custom property. See
Icons for loading the font and the defaults.
<md-gb-icon>star</md-gb-icon>import '@material/web/labs/gb/styles/icon/md-gb-icon.js';Optical sizes
Link to “Optical sizes”The optical size follows --md-icon-size, which supports 20, 24, 40 and 48px.
<md-gb-icon style="--md-icon-size: 20px">star</md-gb-icon>
<md-gb-icon>star</md-gb-icon>
<md-gb-icon style="--md-icon-size: 40px">star</md-gb-icon>
<md-gb-icon style="--md-icon-size: 48px">star</md-gb-icon>Weights
Link to “Weights”--md-icon-wght runs from 100 to 700.
<md-gb-icon style="--md-icon-wght: 200">star</md-gb-icon>
<md-gb-icon>star</md-gb-icon>
<md-gb-icon style="--md-icon-wght: 700">star</md-gb-icon>Fill
Link to “Fill”--md-icon-fill is 0 (outlined) or 1 (filled), and the change animates.
<md-gb-icon>favorite</md-gb-icon>
<md-gb-icon style="--md-icon-fill: 1">favorite</md-gb-icon>Grades
Link to “Grades”--md-icon-grad adds emphasis when positive. It needs GRAD in the font
request.
<md-gb-icon style="--md-icon-grad: -25">star</md-gb-icon>
<md-gb-icon>star</md-gb-icon>
<md-gb-icon style="--md-icon-grad: 200">star</md-gb-icon>