fix(button): check for icon and add css after content checked

fixes #6662

Author: brandyscarney

src/components/button/button.ts

@@ -210,6 +210,14 @@ export class Button {
     this._assignCss(true);
   }
 
+  /**
+   * @private
+   */
+  ngAfterContentChecked() {
+    this._readIcon(this._elementRef.nativeElement);
+    this._assignCss(true);
+  }
+
   /**
    * @private
    */
@@ -256,6 +264,9 @@ export class Button {
       }
     }
 
+    // Remove any classes that are set already
+    this._setClass(this._icon, false);
+
     if (nodes.length > 1) {
       if (nodes[0] === ICON && nodes[1] === TEXT) {
         this._icon = 'icon-left';

src/components/item/test/sliding/index.ts

@@ -11,12 +11,25 @@ class E2EPage {
   items = [];
   shouldShow: boolean = true;
 
+  moreText: string = "Dynamic More";
+  archiveText: string = "Dynamic Archive";
+
   constructor(private app: App, private nav: NavController) {
-    for (let x = 0; x < 20; x++) {
+    for (let x = 0; x < 5; x++) {
       this.items.push(x);
     }
   }
 
+  changeDynamic() {
+    if (this.moreText.includes("Dynamic")) {
+      this.moreText = "Changed More";
+      this.archiveText = "Changed Archive";
+    } else {
+      this.moreText = "Dynamic More";
+      this.archiveText = "Dynamic Archive";
+    }
+  }
+
   closeOpened() {
     this.list.closeSlidingItems();
   }

src/components/item/test/sliding/main.html

@@ -83,7 +83,38 @@ <h3>Ben Sperry</h3>
         <button danger (click)="del(item)">
           <ion-icon name="trash"></ion-icon>Delete
         </button>
+      </ion-item-options>
+    </ion-item-sliding>
 
+    <ion-item-sliding #item>
+      <ion-item>
+        One Line, dynamic option
+      </ion-item>
+      <ion-item-options>
+        <button primary>
+          <ion-icon name="more"></ion-icon>
+          {{ moreText }}
+        </button>
+        <button secondary (click)="archive(item)">
+          <ion-icon name="archive"></ion-icon>
+          {{ archiveText }}
+        </button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding #item>
+      <ion-item>
+        One Line, dynamic icon-left option
+      </ion-item>
+      <ion-item-options icon-left>
+        <button primary>
+          <ion-icon name="more"></ion-icon>
+          {{ moreText }}
+        </button>
+        <button secondary (click)="archive(item)">
+          <ion-icon name="archive"></ion-icon>
+          {{ archiveText }}
+        </button>
       </ion-item-options>
     </ion-item-sliding>
 
@@ -111,9 +142,10 @@ <h3>ng-for {{data}}</h3>
 
   </ion-list>
 
-  <p>
-    <button (click)="closeOpened()">Close opened items</button>
-  </p>
+  <div padding>
+    <button block (click)="changeDynamic()">Change Dynamic Options</button>
+    <button block (click)="closeOpened()">Close Opened Items</button>
+  </div>
 
 </ion-content>