angular / angular/components

mat-icon color doesn't follow the guidelines

Aperta
#9,664 5 commenti 5 reazioni 0 assegnatari Vedi su GitHub
area: material/icon material spec P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia riproducendo il comportamento delle icone in Material icon overview e negli esempi elencati di list, datepicker, form-field e button, quindi confronta i colori renderizzati con le linee guida Material collegate. Il lavoro è completato quando le icone utilizzano i valori predefiniti delle linee guida, a meno che non sia impostato esplicitamente un colore primary, accent o warning, e i controlli di avanzamento utilizzano l’opacità predefinita richiesta.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
design, frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.