[MD settings] Prevent distortion of icons in cramped UI

chrome/browser/resources/settings/settings_shared_css.html

 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="settings_vars_css.html">
 
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
     <style include="cr-shared-style">
       /* Included here so we don't have to include "iron-positioning" in every
        * stylesheet. See crbug.com/498405. */
       [hidden] {
@@ skipping 14 matching lines @@
         align-self: flex-start;
         color: var(--paper-grey-600);
         display: flex;
         font-size: inherit;
         font-weight: 500;
         margin: 0;
         padding-bottom: 12px;
         padding-top: 24px;
       }
 
+      iron-icon {
+        flex-shrink: 0;  /* Prevent distortion of icons in cramped UI. */

[hcarmona, 2017/04/20 00:48:03]

Are icons allowed to grow? should this just be flex: 0;

[dschuyler, 2017/04/20 01:24:56]

Using flex: 0; causes the icon to disappear. flex can be used to set the flex
grow, shrink, and basis in one go. To prevent growing, I think a grow of zero
would be needed (or not using flex). Either way, growing hasn't been an issue
that I'm aware of.

[hcarmona, 2017/04/20 01:38:26]

Acknowledged.

+      }
+
       iron-icon[icon='cr:check'],
       iron-icon[icon='settings:done'] {
        --iron-icon-fill-color: var(--google-green-500);
       }
 
       paper-button {
         height: 36px;
         margin: 0;
       }
 
@@ skipping 352 matching lines @@
         transform: rotate(-135deg);
       }
 
       .column-header {
         color: var(--paper-grey-600);
         font-weight: 500;
       }
     </style>
   </template>
 </dom-module>