diff --git a/demos/src/button/pages/page-one/page-one.html b/demos/src/button/pages/page-one/page-one.html
index 8ffce86c9d..96bd1f0966 100644
--- a/demos/src/button/pages/page-one/page-one.html
+++ b/demos/src/button/pages/page-one/page-one.html
@@ -39,12 +39,12 @@
 
   <h4>Icons</h4>
 
-  <button ion-button icon-left color="dark">
+  <button ion-button icon-start color="dark">
     <ion-icon name="star"></ion-icon>
     Left Icon
   </button>
 
-  <button ion-button icon-right color="dark">
+  <button ion-button icon-end color="dark">
     Right Icon
     <ion-icon name="star"></ion-icon>
   </button>
diff --git a/demos/src/item-sliding/pages/page-one/page-one.html b/demos/src/item-sliding/pages/page-one/page-one.html
index 6a05e0f3ff..505a804b18 100644
--- a/demos/src/item-sliding/pages/page-one/page-one.html
+++ b/demos/src/item-sliding/pages/page-one/page-one.html
@@ -67,7 +67,7 @@
           <ion-icon name="trash"></ion-icon>
         </button>
       </ion-item-options>
-      <ion-item-options (ionSwipe)="download(item)" icon-left>
+      <ion-item-options (ionSwipe)="download(item)" icon-start>
         <button ion-button color="dark" (click)="more(item)">
           <ion-icon name="volume-off"></ion-icon>
           Mute
diff --git a/demos/src/loading/pages/page-one/page-one.html b/demos/src/loading/pages/page-one/page-one.html
index 3dd6ec62ee..d5c61ec7a1 100644
--- a/demos/src/loading/pages/page-one/page-one.html
+++ b/demos/src/loading/pages/page-one/page-one.html
@@ -58,7 +58,7 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <button ion-button icon-right (click)="goToPage2()">
+      <button ion-button icon-end (click)="goToPage2()">
         Show Loading and Navigate
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
diff --git a/demos/src/navbar/pages/page-one/page-one.html b/demos/src/navbar/pages/page-one/page-one.html
index 1359b1b6c8..c08dbcf33b 100644
--- a/demos/src/navbar/pages/page-one/page-one.html
+++ b/demos/src/navbar/pages/page-one/page-one.html
@@ -55,7 +55,7 @@
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -69,7 +69,7 @@
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
diff --git a/demos/src/tabs/pages/page-one/page-one.html b/demos/src/tabs/pages/page-one/page-one.html
index 3fd33310a3..14c90b7745 100644
--- a/demos/src/tabs/pages/page-one/page-one.html
+++ b/demos/src/tabs/pages/page-one/page-one.html
@@ -41,7 +41,7 @@
 
 
   <!-- Icons right of text -->
-  <ion-tabs tabs-only tabsLayout="icon-right" selectedIndex="0" color="light">
+  <ion-tabs tabs-only tabsLayout="icon-end" selectedIndex="0" color="light">
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
@@ -49,7 +49,7 @@
 
 
   <!-- Icons left of text -->
-  <ion-tabs tabs-only tabsLayout="icon-left" color="dark">
+  <ion-tabs tabs-only tabsLayout="icon-start" color="dark">
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
diff --git a/demos/src/title/pages/page-one/page-one.html b/demos/src/title/pages/page-one/page-one.html
index 1359b1b6c8..c08dbcf33b 100644
--- a/demos/src/title/pages/page-one/page-one.html
+++ b/demos/src/title/pages/page-one/page-one.html
@@ -55,7 +55,7 @@
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -69,7 +69,7 @@
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
diff --git a/demos/src/toolbar/pages/page-one/page-one.html b/demos/src/toolbar/pages/page-one/page-one.html
index 1359b1b6c8..c08dbcf33b 100644
--- a/demos/src/toolbar/pages/page-one/page-one.html
+++ b/demos/src/toolbar/pages/page-one/page-one.html
@@ -55,7 +55,7 @@
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -69,7 +69,7 @@
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
diff --git a/src/components/action-sheet/action-sheet-component.ts b/src/components/action-sheet/action-sheet-component.ts
index 7de66952c8..7cbb802ce6 100644
--- a/src/components/action-sheet/action-sheet-component.ts
+++ b/src/components/action-sheet/action-sheet-component.ts
@@ -22,13 +22,13 @@ import { ViewController } from '../../navigation/view-controller';
         '<div class="action-sheet-group">' +
           '<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
           '<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
-          '<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-left]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
+          '<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-start]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
             '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
             '{{b.text}}' +
           '</button>' +
         '</div>' +
         '<div class="action-sheet-group" *ngIf="cancelButton">' +
-          '<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-left]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
+          '<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-start]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
             '<ion-icon [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
             '{{cancelButton.text}}' +
           '</button>' +
diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss
index 2baf340f60..75d83908ac 100644
--- a/src/components/alert/alert.ios.scss
+++ b/src/components/alert/alert.ios.scss
@@ -193,8 +193,10 @@ $alert-ios-radio-min-width:                     30px !default;
 /// @prop - Top of the icon in the radio alert
 $alert-ios-radio-icon-top:                      -7px !default;
 
-/// @prop - Left of the icon in the radio alert
+// deprecated
 $alert-ios-radio-icon-left:                     7px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-ios-radio-icon-start:                    $alert-ios-radio-icon-left !default;
 
 /// @prop - Width of the icon in the radio alert
 $alert-ios-radio-icon-width:                    6px !default;
@@ -277,8 +279,10 @@ $alert-ios-checkbox-background-color-on:        color($colors-ios, primary) !def
 /// @prop - Top of the icon in the checkbox alert
 $alert-ios-checkbox-icon-top:                   4px !default;
 
-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-ios-checkbox-icon-left:                  7px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-ios-checkbox-icon-start:                 $alert-ios-checkbox-icon-left !default;
 
 /// @prop - Width of the icon in the checkbox alert
 $alert-ios-checkbox-icon-width:                 4px !default;
@@ -446,7 +450,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // -----------------------------------------
 
 .alert-ios [aria-checked=true] .alert-radio-inner {
-  @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-left);
+  @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start);
 
   position: absolute;
 
@@ -519,7 +523,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // -----------------------------------------
 
 .alert-ios [aria-checked=true] .alert-checkbox-inner {
-  @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-left);
+  @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start);
 
   position: absolute;
 
diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss
index 37cfb9d762..3921b43d17 100644
--- a/src/components/alert/alert.md.scss
+++ b/src/components/alert/alert.md.scss
@@ -249,8 +249,10 @@ $alert-md-radio-border-color-on:              $alert-md-button-text-color !defau
 /// @prop - Top of the icon in the alert radio
 $alert-md-radio-icon-top:                     2px !default;
 
-/// @prop - Left of the icon in the alert radio
+// deprecated
 $alert-md-radio-icon-left:                    2px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-md-radio-icon-start:                   $alert-md-radio-icon-left !default;
 
 /// @prop - Width of the icon in the alert radio
 $alert-md-radio-icon-width:                   8px !default;
@@ -323,8 +325,10 @@ $alert-md-checkbox-border-color-on:           $alert-md-button-text-color !defau
 /// @prop - Top of the icon in the checkbox alert
 $alert-md-checkbox-icon-top:                  0 !default;
 
-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-md-checkbox-icon-left:                 3px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-md-checkbox-icon-start:                $alert-md-checkbox-icon-left !default;
 
 /// @prop - Width of the icon in the checkbox alert
 $alert-md-checkbox-icon-width:                6px !default;
@@ -481,7 +485,7 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // ---------------------------------------------------
 
 .alert-md .alert-radio-inner {
-  @include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-left);
+  @include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-start);
   @include border-radius($alert-md-radio-icon-border-radius);
 
   position: absolute;
@@ -559,7 +563,7 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 }
 
 .alert-md [aria-checked=true] .alert-checkbox-inner {
-  @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-left);
+  @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start);
 
   position: absolute;
 
diff --git a/src/components/alert/alert.wp.scss b/src/components/alert/alert.wp.scss
index 896aef0a32..c20bf270cc 100644
--- a/src/components/alert/alert.wp.scss
+++ b/src/components/alert/alert.wp.scss
@@ -262,8 +262,10 @@ $alert-wp-radio-border-color:                  $input-wp-border-color !default;
 /// @prop - Top of the icon in the radio alert
 $alert-wp-radio-icon-top:                      2px !default;
 
-/// @prop - Left of the icon in the radio alert
+// deprecated
 $alert-wp-radio-icon-left:                     2px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-wp-radio-icon-start:                    $alert-wp-radio-icon-left !default;
 
 /// @prop - Width of the icon in the radio alert
 $alert-wp-radio-icon-width:                    8px !default;
@@ -328,8 +330,10 @@ $alert-wp-checkbox-background-on:              color($colors-wp, primary) !defau
 /// @prop - Top of the icon in the checkbox alert
 $alert-wp-checkbox-icon-top:                   -2px !default;
 
-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-wp-checkbox-icon-left:                  3px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-wp-checkbox-icon-start:                 $alert-wp-checkbox-icon-left !default;
 
 /// @prop - Width of the icon in the checkbox alert
 $alert-wp-checkbox-icon-width:                 6px !default;
@@ -495,7 +499,7 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // ---------------------------------------------------
 
 .alert-wp .alert-radio-inner {
-  @include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-left);
+  @include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-start);
   @include border-radius($alert-wp-radio-icon-border-radius);
 
   position: absolute;
@@ -575,7 +579,7 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp [aria-checked=true] .alert-checkbox-inner {
-  @include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-left);
+  @include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-start);
 
   position: absolute;
 
diff --git a/src/components/button/button-icon.scss b/src/components/button/button-icon.scss
index e9f8bc80ef..9a603ff14c 100644
--- a/src/components/button/button-icon.scss
+++ b/src/components/button/button-icon.scss
@@ -11,13 +11,15 @@
   pointer-events: none;
 }
 
-[icon-left] ion-icon {
+[icon-left] ion-icon, // deprecated
+[icon-start] ion-icon {
   @include button-icon;
 
   @include padding-horizontal(null, .3em);
 }
 
-[icon-right] ion-icon {
+[icon-right] ion-icon, // deprecated
+[icon-end] ion-icon {
   @include button-icon;
 
   @include padding-horizontal(.4em, null);
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 115919432c..787ddfc335 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -42,12 +42,12 @@ import { isTrueProperty } from '../../util/util';
   *  <button ion-button round outline>Outline + Round</button>
   *
   *  <!-- Icons -->
-  *  <button ion-button icon-left>
+  *  <button ion-button icon-start>
   *    <ion-icon name="star"></ion-icon>
   *    Left Icon
   *  </button>
   *
-  *  <button ion-button icon-right>
+  *  <button ion-button icon-end>
   *    Right Icon
   *    <ion-icon name="star"></ion-icon>
   *  </button>
diff --git a/src/components/item/item-sliding.scss b/src/components/item/item-sliding.scss
index 10ff2695de..c705c2d2a4 100644
--- a/src/components/item/item-sliding.scss
+++ b/src/components/item/item-sliding.scss
@@ -51,7 +51,8 @@ ion-item-options .button {
   box-sizing: content-box;
 }
 
-ion-item-options:not([icon-left]) .button:not([icon-only]) {
+ion-item-options:not([icon-left]) .button:not([icon-only]), // deprecated
+ion-item-options:not([icon-start]) .button:not([icon-only]) {
   .button-inner {
     flex-direction: column;
   }
diff --git a/src/components/item/item-sliding.ts b/src/components/item/item-sliding.ts
index 007f3ae8ed..9e35d704ab 100644
--- a/src/components/item/item-sliding.ts
+++ b/src/components/item/item-sliding.ts
@@ -91,11 +91,11 @@ const enum SlidingState {
  * ### Button Layout
  * If an icon is placed with text in the option button, by default it will
  * display the icon on top of the text. This can be changed to display the icon
- * to the left of the text by setting `icon-left` as an attribute on the
+ * to the left of the text by setting `icon-start` as an attribute on the
  * `<ion-item-options>` element.
  *
  * ```html
- * <ion-item-options icon-left>
+ * <ion-item-options icon-start>
  *    <button ion-button (click)="archive(item)">
  *      <ion-icon name="archive"></ion-icon>
  *      Archive
diff --git a/src/components/tabs/tabs.ios.scss b/src/components/tabs/tabs.ios.scss
index 9408b72ec7..7003c866f6 100644
--- a/src/components/tabs/tabs.ios.scss
+++ b/src/components/tabs/tabs.ios.scss
@@ -106,14 +106,18 @@ $tabs-ios-tab-icon-size:            30px !default;
   vertical-align: top;
 }
 
-.tabs-ios[tabsLayout=icon-right] .tab-button .tab-button-text,
-.tabs-ios[tabsLayout=icon-left] .tab-button .tab-button-text {
+.tabs-ios[tabsLayout=icon-right] .tab-button .tab-button-text, // deprecated
+.tabs-ios[tabsLayout=icon-left] .tab-button .tab-button-text, // deprecated
+.tabs-ios[tabsLayout=icon-end] .tab-button .tab-button-text,
+.tabs-ios[tabsLayout=icon-start] .tab-button .tab-button-text {
   font-size: 1.4rem;
   line-height: 1.1;
 }
 
-.tabs-ios[tabsLayout=icon-right] .tab-button ion-icon,
-.tabs-ios[tabsLayout=icon-left] .tab-button ion-icon {
+.tabs-ios[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
+.tabs-ios[tabsLayout=icon-left] .tab-button ion-icon, // deprecated
+.tabs-ios[tabsLayout=icon-end] .tab-button ion-icon,
+.tabs-ios[tabsLayout=icon-start] .tab-button ion-icon {
   min-width: 24px;
   height: 26px;
 
diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss
index e77b5b9397..59f2e7f3f9 100644
--- a/src/components/tabs/tabs.md.scss
+++ b/src/components/tabs/tabs.md.scss
@@ -90,14 +90,18 @@ $tabs-md-tab-text-transition:                 transform .3s ease-in-out !default
 /// @prop - Transform for the active tab button icon when the layout is icon-top, icon-only, or title-only
 $tabs-md-tab-icon-transform-active:           translate3d(0, -2px, 0) !default;
 
-/// @prop - Transform for the active tab button icon when the layout is icon-right
+// deprecated
 $tabs-md-tab-icon-right-transform-active:     translate3d(2px, 0, 0) !default;
+/// @prop - Transform for the active tab button icon when the layout is icon-end
+$tabs-md-tab-icon-end-transform-active:       $tabs-md-tab-icon-right-transform-active !default;
 
 /// @prop - Transform for the active tab button icon when the layout is icon-bottom
 $tabs-md-tab-icon-bottom-transform-active:    translate3d(0, 2px, 0) !default;
 
-/// @prop - Transform for the active tab button icon when the layout is icon-left
+// deprecated
 $tabs-md-tab-icon-left-transform-active:      translate3d(-2px, 0, 0) !default;
+/// @prop - Transform for the active tab button icon when the layout is icon-start
+$tabs-md-tab-icon-start-transform-active:     $tabs-md-tab-icon-left-transform-active !default;
 
 /// @prop - Transform origin for the tab button text
 $tabs-md-tab-icon-transform-origin:           50% 150% !default;
@@ -190,9 +194,10 @@ $tabs-md-tab-icon-size:                       2.4rem !default;
   transform: $tabs-md-tab-icon-transform-active;
 }
 
-// Tab layout: icon-right
-.tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon {
-  transform: $tabs-md-tab-icon-right-transform-active;
+// Tab layout: icon-end
+.tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon, // deprecated
+.tabs-md[tabsLayout=icon-end] .tab-button[aria-selected=true] .tab-button-icon {
+  transform: $tabs-md-tab-icon-end-transform-active;
 }
 
 // Tab layout: icon-bottom
@@ -200,9 +205,10 @@ $tabs-md-tab-icon-size:                       2.4rem !default;
   transform: $tabs-md-tab-icon-bottom-transform-active;
 }
 
-// Tab layout: icon-left
-.tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon {
-  transform: $tabs-md-tab-icon-left-transform-active;
+// Tab layout: icon-start
+.tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon, // deprecated
+.tabs-md[tabsLayout=icon-start] .tab-button[aria-selected=true] .tab-button-icon {
+  transform: $tabs-md-tab-icon-start-transform-active;
 }
 
 
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 4e4c91be37..a2989afffe 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -93,17 +93,21 @@
   order: 10;
 }
 
-[tabsLayout=icon-left] .tab-button,
-[tabsLayout=icon-right] .tab-button {
+[tabsLayout=icon-left] .tab-button, // deprecated
+[tabsLayout=icon-right] .tab-button, // deprecated
+[tabsLayout=icon-start] .tab-button,
+[tabsLayout=icon-end] .tab-button {
   flex-direction: row;
 }
 
-[tabsLayout=icon-left] .tab-button .tab-button-icon {
+[tabsLayout=icon-left] .tab-button .tab-button-icon, // deprecated
+[tabsLayout=icon-start] .tab-button .tab-button-icon {
   @include padding-horizontal(null, 8px);
   @include text-align(end);
 }
 
-[tabsLayout=icon-right] .tab-button .tab-button-icon {
+[tabsLayout=icon-right] .tab-button .tab-button-icon, // deprecated
+[tabsLayout=icon-end] .tab-button .tab-button-icon {
   @include padding-horizontal(8px, null);
   @include text-align(start);
 
@@ -138,7 +142,9 @@
 }
 
 [tabsLayout=icon-bottom] .tab-badge,
-[tabsLayout=icon-left] .tab-badge,
-[tabsLayout=icon-right] .tab-badge {
+[tabsLayout=icon-left] .tab-badge, // deprecated
+[tabsLayout=icon-right] .tab-badge, // deprecated
+[tabsLayout=icon-start] .tab-badge,
+[tabsLayout=icon-end] .tab-badge {
   @include position(null, calc(50% - 50px), null, null);
 }
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index a37b4a9f5b..1b53efeb19 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -184,7 +184,7 @@ export class Tabs extends Ion implements AfterViewInit, RootNode, ITabs {
   @Input() selectedIndex: number;
 
   /**
-   * @input {string} Set the tabbar layout: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`.
+   * @input {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
    */
   @Input() tabsLayout: string;
 
diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss
index 7a6a4e9d1e..2d4e05f22b 100644
--- a/src/components/tabs/tabs.wp.scss
+++ b/src/components/tabs/tabs.wp.scss
@@ -123,13 +123,17 @@ $tabs-wp-tab-icon-size:                 2.4rem !default;
   padding-bottom: 8px;
 }
 
-.tabs-wp[tabsLayout=icon-right] .tab-button,
-.tabs-wp[tabsLayout=icon-left] .tab-button {
+.tabs-wp[tabsLayout=icon-right] .tab-button, // deprecated
+.tabs-wp[tabsLayout=icon-left] .tab-button, // deprecated
+.tabs-wp[tabsLayout=icon-end] .tab-button,
+.tabs-wp[tabsLayout=icon-start] .tab-button {
   padding-bottom: 10px;
 }
 
-.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon,
-.tabs-wp[tabsLayout=icon-left] .tab-button ion-icon {
+.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
+.tabs-wp[tabsLayout=icon-left] .tab-button ion-icon, // deprecated
+.tabs-wp[tabsLayout=icon-end] .tab-button ion-icon,
+.tabs-wp[tabsLayout=icon-start] .tab-button ion-icon {
   min-width: 24px;
 }
 
diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss
index e46f59feaf..c518be15fa 100644
--- a/src/components/toolbar/toolbar.ios.scss
+++ b/src/components/toolbar/toolbar.ios.scss
@@ -275,7 +275,7 @@ $toolbar-button-ios-strong-font-weight:     600 !default;
 // iOS Toolbar Button Icon
 // --------------------------------------------------
 
-.bar-button-ios.bar-button-icon-left ion-icon {
+.bar-button-ios.bar-button-icon-start ion-icon {
   @include padding-horizontal(null, .3em);
 
   font-size: 1.4em;
@@ -284,7 +284,7 @@ $toolbar-button-ios-strong-font-weight:     600 !default;
   pointer-events: none;
 }
 
-.bar-button-ios.bar-button-icon-right ion-icon {
+.bar-button-ios.bar-button-icon-end ion-icon {
   @include padding-horizontal(.4em, null);
 
   font-size: 1.4em;
diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss
index 9df6e00357..792d948d05 100644
--- a/src/components/toolbar/toolbar.md.scss
+++ b/src/components/toolbar/toolbar.md.scss
@@ -295,7 +295,7 @@ $toolbar-button-md-strong-font-weight:   bold !default;
 // Material Design Toolbar Button Icon
 // --------------------------------------------------
 
-.bar-button-md.bar-button-icon-left ion-icon {
+.bar-button-md.bar-button-icon-start ion-icon {
   @include padding-horizontal(null, .3em);
 
   font-size: 1.4em;
@@ -304,7 +304,7 @@ $toolbar-button-md-strong-font-weight:   bold !default;
   pointer-events: none;
 }
 
-.bar-button-md.bar-button-icon-right ion-icon {
+.bar-button-md.bar-button-icon-end ion-icon {
   @include padding-horizontal(.4em, null);
 
   font-size: 1.4em;
diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss
index b3ffcf3428..b81b46e7d4 100644
--- a/src/components/toolbar/toolbar.wp.scss
+++ b/src/components/toolbar/toolbar.wp.scss
@@ -265,7 +265,7 @@ $toolbar-button-wp-strong-font-weight:   bold !default;
 // Windows Toolbar Button Icon
 // --------------------------------------------------
 
-.bar-button-wp.bar-button-icon-left ion-icon {
+.bar-button-wp.bar-button-icon-start ion-icon {
   @include padding-horizontal(null, .3em);
 
   font-size: 1.4em;
@@ -274,7 +274,7 @@ $toolbar-button-wp-strong-font-weight:   bold !default;
   pointer-events: none;
 }
 
-.bar-button-wp.bar-button-icon-right ion-icon {
+.bar-button-wp.bar-button-icon-end ion-icon {
   @include padding-horizontal(.4em, null);
 
   font-size: 1.4em;
diff --git a/src/config/config.ts b/src/config/config.ts
index 62ca8329d3..c3725fc18d 100644
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -120,7 +120,7 @@ import { isObject, isDefined, isFunction, isArray } from '../util/util';
  * | `spinner`                | `string`            | The default spinner to use when a name is not defined.                                                                                           |
  * | `swipeBackEnabled`       | `boolean`           | Whether native iOS swipe to go back functionality is enabled.                                                                                    |
  * | `tabsHighlight`          | `boolean`           | Whether to show a highlight line under the tab when it is selected.                                                                              |
- * | `tabsLayout`             | `string`            | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-left"`, `"icon-right"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`.  |
+ * | `tabsLayout`             | `string`            | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`.   |
  * | `tabsPlacement`          | `string`            | The position of the tabs relative to the content. Available options: `"top"`, `"bottom"`                                                         |
  * | `tabsHideOnSubPages`     | `boolean`           | Whether to hide the tabs on child pages or not. If `true` it will not show the tabs on child pages.                                              |
  * | `toastEnter`             | `string`            | The name of the transition to use while a toast is presented.                                                                                    |