Components: mat-icon: How to switch between filled, outlined, rounded and two-toned icons?

[nazarkryp]

Bug, feature request, or proposal:

Help.
e.g: there is comment icon comment
on documentation page https://material.io/tools/icons/?search=comment&icon=comment&style=baseline
that icon can be filled, outlined, rounded etc...
How to switch in current material implementation?

What is the current behavior?

Currently we include icons by adding following line of code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

6.x.x

[WizardPC]

There is an issue : https://github.com/google/material-design-icons/issues/773

[josephperrott]

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[mockuniverse]

The bug here is completely inadequate documentation. How do you specify "filled" versus "outlined" in this package? Good luck sorting through the mountain of noise surrounding material in general and material icons specifically for this seemingly simple question (none seem to apply or at least work).

[thw0rted]

Wouldn't this just be a matter of registering each variation with the MatIconRegistry then using the fontSet attribute to pick one? I don't have a link to an example (and I haven't tried it myself) but I think that's the whole point of having the Registry service in the first place...

[raviji]

you can use outline one as below ex:
<mat-icon>info_outline</mat-icon>
Filled one and default one:
<mat-icon>info</mat-icon>

[artkrasnyuk]

you can use outline one as below ex:
<mat-icon>info_outline</mat-icon>
Filled one and default one:
<mat-icon>info</mat-icon>

Not working for complex names, e.g add_photo_alternate

[sulha199]

you can use outline one as below ex:
<mat-icon>info_outline</mat-icon>
Filled one and default one:
<mat-icon>info</mat-icon>

Not working for complex names, e.g add_photo_alternate

You can use this updated material icon stylesheet from google https://stackoverflow.com/a/54902967/5932812

[mrpharderwijk]

@sulha199: This is still not working for me <mat-icon>account_circle_outline</mat-icon> even account_circle_outlined is also not working. Besides that I would opt the Angular Material team to add filled | outline | rounded | two-tone | sharp as an attribute on the mat-icon like <mat-icon outline>...</mat-icon>...

[George35mk]

@raviji exactly the example I needed, thanks

[mayowaojo]

you can use outline one as below ex:
<mat-icon>info_outline</mat-icon>
Filled one and default one:
<mat-icon>info</mat-icon>

Not working for complex names, e.g add_photo_alternate

You can use this updated material icon stylesheet from google https://stackoverflow.com/a/54902967/5932812

This works phenomenally.

[ronnetzer]

This works for me:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
rel="stylesheet"/>

<mat-icon fontSet="material-icons-outlined">edit</mat-icon>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}