angular / angular/components

mat-icon color doesn't follow the guidelines

Offen
#9,664 5 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/icon material spec P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### Bug, feature request, or proposal:
mat-icon color doesn't follow the [guidelines](https://material.io/guidelines/style/icons.html)

This example added some extra css to partially fixed the problem, it does so only for the white background theme.
![screen shot 2018-01-29 at 18](https://user-images.githubusercontent.com/30979663/35525564-25694464-0525-11e8-843f-c2cf772296a3.jpg)

#### What is the expected behavior?
All icons should be initialised according to the [guidelines](https://material.io/guidelines/style/icons.html) when color attribute is not explicitly set to "primary", "accent" or "warning".
![screen shot 2018-01-29 at 18 05 05](https://user-images.githubusercontent.com/30979663/35523783-ee96cd4e-051f-11e8-8e78-02ee62e6d71b.png)

#### What is the current behavior?
Icons inherit the properties of the container, most of the time black with 87% opacity.

#### What are the steps to reproduce?
https://material.angular.io/components/icon/overview
https://material.angular.io/components/list/examples (folder icon)
https://material.angular.io/components/datepicker/examples (datepicker icon)
https://material.angular.io/components/form-field/overview (prefixes, suffixes: both text and icon)
https://material.angular.io/components/button/examples (basic icon button, basic fab buttons: which should have also white backgrounds)

#### What is the use-case or motivation for changing an existing behavior?
Consistency with the guidelines, which means less css to write afterwards.

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

#### Is there anything else we should know?
Progress controls should also have a basic color of black with 54% opacity, so that it will work on the basic fab button. Now the default if primary, which in my opinion is wrong.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, das Icon-Verhalten in der Material icon overview und in den aufgeführten list-, datepicker-, form-field- und button-Beispielen zu reproduzieren, und vergleiche anschließend die gerenderten Farben mit den verlinkten Material-Richtlinien. Erledigt ist es, wenn Icons die Standardwerte der Richtlinie verwenden, sofern nicht eine explizite primary-, accent- oder warning-Farbe gesetzt ist, und Fortschrittssteuerelemente die angeforderte Standardopazität verwenden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
design, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.