Components: mat-icon: Choose between Filled, Outlined, Rounded, Two-Tone and Sharp icons;

[Joaovtrc]

Please describe the feature you would like to request.

To be able to select between Filled, Outlined, Rounded, Two-Tone and Sharp when using mat-icon;

What is the use-case or motivation for this proposal?

An easy way to use the new icons available on https://material.io/tools/icons/?style=baseline (without having to manually put the SVG's of the icons you want)

[reumerd]

This seems partly supported, but not for all icons.
e.g. Delete and Label have an outline version by using delete_outline as label, but print and edit do not have an oultine version available in angular material.

[Flashunt]

Hi!
Some news?

[max-SS]

<mat-icon appearance="outline">mail</mat-icon>

as well as? https://material.angular.io/components/form-field/overview#form-field-appearance-variants
:3

[bisonfoutu]

Hi,
I've just been playing around with this and it seems like there is already a way to do this more easily.

You need to do two things:

1. Change the font url to add the alternative styles you want to use. For example:
   https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

2. Use the fontSet attribute on <mat-icon> to specify the style you want to apply. Here's an example to display a round home icon: <mat-icon fontSet="material-icons-round">home</mat-icon>.

Not as straight-forward as writing <mat-icon>home_round</mat-icon>, but I can definitely live with that. Wouldn't hurt mentioning this solution in the docs though.

In the meantime, hope this will help 😃