Google Material Icons, Outlined, Rounded, Two-Tone, Sharp sets are not working
Update, with Answer:
Looking at the Readme in the source code, https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons
You Append Outline to the icon name. So for you:
import { AccountCircleOutline } from "@material-ui/icons";
or
import AccountCircleOutline from "@material-ui/icons/AccountCircleOutline";
I do believe this answers your question. A "correct answer" is always nice! Thanks!
Update as of 2021
In short Google isn't (still) advertising the fact that you can load the different set via the Google API 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 base stylesheet.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
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.
| Theme | URL parameters | CSS class |
|---|---|---|
| Filled (Default) | ?family=Material+Icons |
material-icons |
| Outlined | ?family=Material+Icons+Outlined |
material-icons-outlined |
| Two Tone | ?family=Material+Icons+Two+Tone |
material-icons-two-tone |
| Round | ?family=Material+Icons+Round |
material-icons-round |
| Sharp | ?family=Material+Icons+Sharp |
material-icons-sharp |
Better performances
Like Google text-based font, Google Material Icons also accept the &display=swap url parameter.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
You can learn more about &display=swap @ https://developers.google.com/web/updates/2016/02/font-display
You can also specify a <link rel="preconnect" tag in the <head> of your document to improve load performances.
<link rel="preconnect" href="https://fonts.gstatic.com">
Example
<!--head-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
<!--body-->
<span class="material-icons-two-tone">
account_circle
</span>
<span class="material-icons-two-tone">
check_circle
</span>
<span class="material-icons-two-tone">
favorite
</span>