Template:Material icon/doc: Difference between revisions

Latest revision as of 12:37, 17 May 2025

This template inserts a Material Symbols icon.

This template is a variable font, so you can adjust the weight, grade, fill and optical size of the icon.

Range: 100 to 700 (through wght settings in font-variation-settings)

Weight	Example icons
100	searchhomemenuclosesettings
200	searchhomemenuclosesettings
300	searchhomemenuclosesettings
400	searchhomemenuclosesettings
500	searchhomemenuclosesettings
600	searchhomemenuclosesettings
700	searchhomemenuclosesettings

@@ Line 1: / Line 1: @@
-This template inserts a Material Symbols icons. Here is a table of icons:
+This template inserts a Material Symbols icon.
+== Styling ==
+This template is a '''variable font''', so you can adjust the weight, grade, fill and optical size of the icon.
+=== Weight ===
+Range: 100 to 700 (through <code>wght</code> settings in <code>font-variation-settings</code>)
+{| class="wikitable"
+! Weight
+! Example icons
+|-
+| 100
+| {{material icon|1=<span style="font-variation-settings: 'wght' 100">searchhomemenuclosesettings</span>}}
+|-
+| 200
+| {{material icon|1=<span style="font-variation-settings: 'wght' 200">searchhomemenuclosesettings</span>}}
+|-
+| 300
+| {{material icon|1=<span style="font-variation-settings: 'wght' 300">searchhomemenuclosesettings</span>}}
+|-
+| 400
+| {{material icon|1=<span style="font-variation-settings: 'wght' 400">searchhomemenuclosesettings</span>}}
+|-
+| 500
+| {{material icon|1=<span style="font-variation-settings: 'wght' 500">searchhomemenuclosesettings</span>}}
+|-
+| 600
+| {{material icon|1=<span style="font-variation-settings: 'wght' 600;">searchhomemenuclosesettings</span>}}
+|-
+| 700
+| {{material icon|1=<span style="font-variation-settings: 'wght' 700;">searchhomemenuclosesettings</span>}}
+|}
+== Table of icons ==
 {| class="wikitable"
 ! Icon name