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 の本文から書いたものです。