mat-icon color doesn't follow the guidelines

[philip-firstorder]

Bug, feature request, or proposal:

mat-icon color doesn't follow the guidelines

This example added some extra css to partially fixed the problem, it does so only for the white background theme.

What is the expected behavior?

All icons should be initialised according to the guidelines when color attribute is not explicitly set to "primary", "accent" or "warning".

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.

[philip-firstorder]

This is my temporary css fix in global styles.scss, works also for the input prefix and suffix

// mat-icon color doesn't follow the guidelines 
// https://github.com/angular/material2/issues/9664
.mat-icon,
.mat-form-field-prefix,
.mat-form-field-suffix {
  color: rgba(0, 0, 0, 0.54);
  &:focus {
    color: rgba(0, 0, 0, 0.87);
  }
}

.mat-icon[disabled] {
  color: rgba(0, 0, 0, 0.38);
}

.mat-primary,
.mat-accent {
  .mat-icon {
    color: inherit;
  }
}

.mat-form-field-disabled {
  .mat-form-field-prefix,
  .mat-form-field-suffix,
  .mat-form-field-label,
  .mat-hint {
    color: rgba(0, 0, 0, 0.38);
  }
}

[Klaster1]

The linked guideline page does not list icon colors as on screenshot. Does the issue still stand? I found it because icons had too much contrast for my taste, other Material apps like YouTube do have lower contrast that seems to match the values above.

To address the issue in my app, I resorted to the following mixin, but it's not comprehensive and will require modification for particular use cases:

@mixin fix-icon-color($active-focused, $active-unfocused) {
  .mat-icon-no-color.fix-icon-color {
    color: $active-focused
  }

  .mat-list-base .mat-list-item,
  .mat-option,
  .mat-icon-button {
    .mat-icon-no-color {
      color: $active-focused
    }
  }

  .mat-list-item:hover,
  .mat-option.mat-active,
  .mat-option:hover,
  .mat-icon-button:hover {
    .mat-icon-no-color {
      color: $active-unfocused
    }
  }
}

@include angular-material-theme($theme);
@include fix-icon-color(
  map-get($mat-light-theme-foreground, 'icon'),
  map-get($mat-light-theme-foreground, 'text')
);

Another thing to note is the fact that foreground/background palettes require an "icon" value, but the value is used only once to style the mat-menu icons.

[mrmokwa]

I think it was made this way because mat-list doesn't have a default background, like mat-select for example, that have a white background color when ligth theme and therefore have the correct icon color.

But yeah, I agree that this issue should be addressed and IMO, other components, that suffer the same problem (like table), should have it fixed too.

[Char2sGu]

@debug: map.get($theme, 'colors', 'foreground');

  foreground: (
    base: black,
    divider: rgba(0, 0, 0, 0.12),
    dividers: rgba(0, 0, 0, 0.12),
    disabled: rgba(0, 0, 0, 0.38),
    disabled-button: rgba(0, 0, 0, 0.26),
    disabled-text: rgba(0, 0, 0, 0.38),
    elevation: black,
    hint-text: rgba(0, 0, 0, 0.38),
    secondary-text: rgba(0, 0, 0, 0.54),
    icon: rgba(0, 0, 0, 0.54), //              <----------
    icons: rgba(0, 0, 0, 0.54), //            <----------
    text: rgba(0, 0, 0, 0.87),
    slider-min: rgba(0, 0, 0, 0.87),
    slider-off: rgba(0, 0, 0, 0.26),
    slider-off-active: rgba(0, 0, 0, 0.38),
  ),

Actually the color of icon is already defined in the stylesheet, but not applied to the component. I wonder why.

[stevebor1]

Any update on this?