I'm trying to use the Material Icons font from Google Outlined set that just came out, but I can't figure it out. There is no information nor documentation.
Some icons are being displayed as filled and some as outlined.
eg: The account_circle
icon from the Outlined set
How are you supposed to use the Outlined set? Any help is appreciated.
Best Answer
Update as of 2021
In short Google isn't (still) advertising the fact that you can load the different set via the Google Apis url on the Material Icons website. They are only, as per Google Material Icons instructions, talking about the default filled set which uses the following
html
tag to enqueue the Material Icons basestylesheet
.If you want to use the Outlined, the Two Tone, Round or Sharp sets, you need to add the following to the Material Icons url.
?family=Material+Icons
material-icons
?family=Material+Icons+Outlined
material-icons-outlined
?family=Material+Icons+Two+Tone
material-icons-two-tone
?family=Material+Icons+Round
material-icons-round
?family=Material+Icons+Sharp
material-icons-sharp
Better performances
Like Google text-based font, Google Material Icons also accept the
&display=swap
url parameter.You can learn more about
&display=swap
@ https://developers.google.com/web/updates/2016/02/font-displayYou can also specify a
<link rel="preconnect"
tag in the<head>
of your document to improve load performances.Example