mat-icon color doesn't follow the guidelines

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

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

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

首先重现 Material icon overview 以及所列出的 list、datepicker、form-field 和 button 示例中的图标行为，然后将渲染出的颜色与链接的 Material 指南进行比较。完成的标准是：除非明确设置了 primary、accent 或 warning 颜色，否则图标使用指南默认值，并且进度控件使用所要求的默认不透明度。

由索引模型根据 Issue 内容生成。