[MD settings] icons for clickable rows

chrome/browser/resources/settings/site_settings_page/site_settings_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="/site_settings/constants.html">
 <link rel="import" href="/site_settings/site_settings_behavior.html">
 <link rel="import" href="/site_settings/site_settings_prefs_browser_proxy.html">
 
 <dom-module id="settings-site-settings-page">
   <template>
     <style include="settings-shared">
       .settings-box[category] {
         @apply(--settings-actionable);
       }
     </style>
     <div class="settings-box first" category$="[[ALL_SITES]]"
         on-tap="onTapCategory">
       <iron-icon icon="settings:list"></iron-icon>
       <div class="middle">$i18n{siteSettingsCategoryAllSites}</div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>

[tommycli, 2016/09/20 17:44:08]

I hate to do this to you, but is it possible to do this with CSS instead?

i.e. Make a .settings-box.clickable class? 

Perhaps with a background-image or using the CSS :after selector?

[dschuyler, 2016/09/23 17:29:18]

The control needs to do more than just be a picture. It's an a11y 
target for example. I was able to leverage your suggestion and 
reduce the number of dom-nodes and shadow-roots (vs. what
it would have been otherwise).

Done.

     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.COOKIES]]" on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.COOKIES)]]"></iron-icon>
       <div class="middle">
         <div>
           [[computeTitleForContentCategory(ContentSettingsTypes.COOKIES)]]
         </div>
         <div id="cookies" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.GEOLOCATION]]" on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.GEOLOCATION)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.GEOLOCATION)]]
         <div id="geolocation" class="secondary"></div>
       </div>
-    </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
+   </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.CAMERA]]" on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.CAMERA)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.CAMERA)]]
         <div id="camera" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line" category$="[[ContentSettingsTypes.MIC]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.MIC)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.MIC)]]
         <div id="mic" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.NOTIFICATIONS]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.NOTIFICATIONS)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.NOTIFICATIONS)]]
         <div id="notifications" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.JAVASCRIPT]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.JAVASCRIPT)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.JAVASCRIPT)]]
         <div id="javascript" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.PLUGINS]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.PLUGINS)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.PLUGINS)]]
         <div id="plugins" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.IMAGES]]" on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.IMAGES)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.IMAGES)]]
         <div id="images" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.POPUPS]]" on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.POPUPS)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.POPUPS)]]
         <div id="popups" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.BACKGROUND_SYNC]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.BACKGROUND_SYNC)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(
             ContentSettingsTypes.BACKGROUND_SYNC)]]
         <div id="backgroundSync" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.KEYGEN]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.KEYGEN)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(
             ContentSettingsTypes.KEYGEN)]]
         <div id="keygen" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.AUTOMATIC_DOWNLOADS]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.AUTOMATIC_DOWNLOADS)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(
             ContentSettingsTypes.AUTOMATIC_DOWNLOADS)]]
         <div id="automaticDownloads" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.UNSANDBOXED_PLUGINS]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.UNSANDBOXED_PLUGINS)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(
             ContentSettingsTypes.UNSANDBOXED_PLUGINS)]]
         <div id="unsandboxedPlugins" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.PROTOCOL_HANDLERS]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.PROTOCOL_HANDLERS)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(
             ContentSettingsTypes.PROTOCOL_HANDLERS)]]
         <div id="handlers" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box" category$="[[ContentSettingsTypes.ZOOM_LEVELS]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.ZOOM_LEVELS)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.ZOOM_LEVELS)]]
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box" category$="[[ContentSettingsTypes.USB_DEVICES]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.USB_DEVICES)]]"></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.USB_DEVICES)]]
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
   </template>
   <script src="site_settings_page.js"></script>
 </dom-module>