search

google / material-design-icons

Material Design icons by Google (Material Symbols)
http://google.github.io/material-design-icons/
Apache License 2.0
50.14k stars 9.57k forks source link

Outline & Rounded: New Material icons style #1519

Open sabinebarrera opened 1 year ago

sabinebarrera commented 1 year ago

Now that icons can be included as a library in a Jetpack Compose app, please provide an Outline & Rounded library. Many outlined icons have straight corners/edges, while many rounded icons are filled as shown below.

The Outline & Rounded style is preferred because:

  1. Outline: Outlined symbols use stroke and fill attributes for a light, clean style that works well in dense UIs. The stroke weight of outlined icons can be adjusted to complement or contrast the weight of your typography. See M3 - Styles - Applying Icons. This is the case of our app. It has a lot of information in each screen.
  2. Rounded: Rounded glyphs in icons are visually appealing and nicer when your app uses a good amount of those, and these are easier to read.
tphinney commented 1 year ago

If you switch to the Material Symbols, you will find that the default for the Rounded style is more consistently outlined, rather than the more hybrid approach in the old Material Icons.

sabinebarrera commented 1 year ago

Thanks @tphinney. We considered switching to Material Symbols, but there isn't a Material Symbols dependency that can be included in our Jetpack Compose app. We downloaded the Material Symbols font and added it to the project, and that works, but there are better approaches than this one. I expect a dependency. For more info, see Using Material Symbols as a FONT instead of ImageVectors issue.

We are using icons-extended dependency in our project, but that only gives access to the outlined, filled, rounded, sharp, it two tone themes.