WebUI: cr-icon-button, fix rtl multi-icon buttons

Only the <iron-icon> elements should be flipped when multiple icons are
specified.

Bug: 1108272
Change-Id: Ic8fb4772456092fe0150e11df47c61d6a8981eb5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2441479
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Auto-Submit: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#813308}

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html

@@ -44,7 +44,12 @@
         --cr-icon-button-margin-start: 0;
       }
 
-      :host-context([dir=rtl]):host(:not([dir=ltr])) {
+      :host-context([dir=rtl]):host(:not([dir=ltr]):not([multiple-icons_])) {
+        transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
+      }
+
+      :host-context([dir=rtl]):host(:not([dir=ltr])[multiple-icons_])
+          iron-icon {
         transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
       }
 

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js

@@ -74,6 +74,12 @@ Polymer({
       reflectToAttribute: true,
     },
 
+    /** @private */
+    multipleIcons_: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
+
     /** @private */
     rippleShowing_: {
       type: Boolean,
@@ -177,6 +183,7 @@ Polymer({
       return;
     }
     const icons = (this.ironIcon || '').split(',');
+    this.multipleIcons_ = icons.length > 1;
     icons.forEach(icon => {
       const ironIcon = document.createElement('iron-icon');
       ironIcon.icon = icon;