[MD settings] settings icon color per spec

chrome/browser/resources/settings/settings_shared.css

 /* Copyright 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 /**
  * @fileoverview
  * Common styles for Material Design settings.
  */
 
 paper-button {
@@ skipping 21 matching lines @@
 
 .button-row {
   display: flex;
   margin-top: 25px;
 }
 
 .button-strip {
   text-align: end;
 }
 
+iron-icon {

[dpapad, 2016/01/20 02:24:40]

Nit (optional): Maybe group rules that directly modify default polymer styles
together (like paper-button a few lines above), instead of interleaving them
with CSS classes we have defined.

[dschuyler, 2016/01/21 22:00:52]

Done.

+  color: #969696;

[dpapad, 2016/01/20 02:24:40]

Does this CSS rule affect only elements that directly use iron-icon, or does it
also affect elements that indirectly use it?

I am not sure, but I think that because of CSS scoping this would only affect
the former, in which case it makes me wonder why do we need this to be on the
"global" shared style instead of smaller CSS shared styles (buttons.css,
icons.css etc). In any case, as discussed previously, we are letting those
patters emerge as we go, so no need to change anything here, mentioning it
mostly to verify if I am interpreting the CSS rule correctly.

[dschuyler, 2016/01/21 22:00:52]

If I follow what you're asking, I agree that this needs
to be looked into further.  I'd like to look into polymer
themes and such that might address this better.

+}
+
 .list-frame {
   @apply(--layout-center);
   display: block;
   margin-left: 48px;
   padding: 0;
 }
 
 .list-item {
   @apply(--layout-center);
   border-top: 1px solid #e0e0e0;
@@ skipping 54 matching lines @@
 }
 
 .split .start {
   flex: auto;
 }
 
 .settings-box paper-item iron-icon {
   /* Same padding as paper-icon-button. */
   padding: 8px;
 }