Support other material icon styles

[Langstra]

Material icons are a bit weird with the types of icons they have and support. They have outlined, filled, rounded, sharp and two toned icons. However, if you use the filled type you still have an icon called Help outline.
Info outline also exists, but only for the outline type. Which is not supported in the material-icons class. You need to specify the icon like this html

<span class="material-icons-outlined">
info
</span>

It would be nice to support these different types of icons.

[rienheuver]

Currently we import the material icons like this:

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

To import all the other styles we have to expand that to:

@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp");

This will load 4 extra font files with a combined size of 680 kB, so that's not very nice. Any suggestions on how to support this properly?

One option I can come up with is to simply mention in the documentation that by default we only support the regular style. If you want to use other styles you can add an import URL in your own css, something like:

@import "@riskchallenger/open-components/main.css";
/*Add two-tone material icons */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone");