angular / angular/components

mat-icon color doesn't follow the guidelines

Ouverte
#9,664 5 commentaires 5 réactions 0 personnes assignées Voir sur GitHub
area: material/icon material spec P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire le comportement des icônes dans Material icon overview et dans les exemples listés de list, datepicker, form-field et button, puis comparez les couleurs rendues aux directives Material liées. C’est terminé lorsque les icônes utilisent les valeurs par défaut des directives, sauf si une couleur primary, accent ou warning explicite est définie, et que les contrôles de progression utilisent l’opacité par défaut demandée.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
design, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.