MD Settings: Input method: fix icons

chrome/browser/resources/settings/languages_page/languages_page.html

 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
@@ skipping 45 matching lines @@
         /* TODO(michaelpg): Update to whatever variable is used for the darker,
          * full-width separators: crbug.com/649547. */
         border-top: var(--settings-separator-line);
         margin: 6px 0 0 0;
       }
 
       paper-checkbox.dropdown-item {
         --checkbox-margin-start: 0;
       }
 
+      button[is='paper-icon-button-light'].icon-external {
+        /* The negative margin messes up the outline border. These are in an
+           indented list so this looks fine until moved: crbug.com/708286. */
+        -webkit-margin-end: 0;
+      }
+
       #uiLanguageItem:focus,
       #offerTranslations:focus {
         background-color: transparent;
       }
     </style>
     <settings-languages languages="{{languages}}" prefs="{{prefs}}"
         language-helper="{{languageHelper}}">
     </settings-languages>
     <settings-animated-pages id="pages" section="languages"
         focus-config="[[focusConfig_]]">
@@ skipping 91 matching lines @@
                   on-tap="onInputMethodTap_" on-keypress="onInputMethodTap_"
                   actionable tabindex="0">
                 <div class="start">
                   <div>[[item.displayName]]</div>
                   <div class="explain-selected"
                       hidden="[[!isCurrentInputMethod_(
                           item.id, languages.inputMethods.currentId)]]">
                     $i18n{inputMethodEnabled}
                   </div>
                 </div>
-                <paper-icon-button icon="cr:settings_icon"
+                <button class="icon-external" is="paper-icon-button-light"
                     on-tap="onInputMethodOptionsTap_"
                     hidden="[[!item.hasOptionsPage]]">
-                </paper-icon-button>
+                </button>
               </div>
             </template>
             <div class="list-item" on-tap="onManageInputMethodsTap_" actionable>
               <div class="start" id="manageInputMethods">
                 $i18n{manageInputMethods}
               </div>
               <button class="subpage-arrow" is="paper-icon-button-light"
                   aria-label="$i18n{manageInputMethods}"
                   aria-describedby="customSpelling"></button>
             </div>
@@ skipping 115 matching lines @@
 </if>
     </settings-animated-pages>
     <template is="dom-if" if="[[showAddLanguagesDialog_]]" restamp>
       <settings-add-languages-dialog languages="{{languages}}"
           language-helper="[[languageHelper]]">
       </settings-add-languages-dialog>
     </template>
   </template>
   <script src="languages_page.js"></script>
 </dom-module>