Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Bug, feature request, or proposal:

Help. e.g: there is comment icon <mat-icon>comment</mat-icon> 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

Issue Analytics

State:
Created 5 years ago
Reactions:20
Comments:12 (1 by maintainers)

Top GitHub Comments

49reactions

josephperrottcommented, May 31, 2018

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

46reactions

mockuniversecommented, Jun 6, 2018

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).

Top Results From Across the Web

How can I get Angular Material Icon to show the outline in my ...

The general idea is that some of the icons aren't imported by default, and need to be targeted from a different library. Edit:...

Using Angular Material Filled, Rounded, Sharp, and Two ...

We want to use outline , filled , rounded , sharp , two-tone variations of the home mat-icon . Approach. Include all the...

How to use Material Icon Outlined, Rounded, Two Tone, and ...

Click “Preferences” in the header bar to bring up that dialogue. First, I give it the name of “Material Icons Sharp.” I then...

Icon | Angular Material

mat -icon makes it easier to use vector-based icons in your app. ... and allows you to change the color by setting the...

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2500 glyphs in a ... four adjustable variable font styles (fill, weight, grade, and optical...