diff --git a/packages/core/src/components/item-sliding/item-sliding.ios.scss b/packages/core/src/components/item-sliding/item-sliding.ios.scss
index 106f129a80..6456f40cf2 100644
--- a/packages/core/src/components/item-sliding/item-sliding.ios.scss
+++ b/packages/core/src/components/item-sliding/item-sliding.ios.scss
@@ -27,6 +27,16 @@ $item-ios-sliding-button-icon-color:         color-contrast($colors-ios, $item-i
 
 .list-ios ion-item-options {
   border-bottom: $hairlines-width solid $list-ios-border-color;
+
+  ion-item-option:last-child,
+  &[side="right"] ion-item-option:last-child {
+    @include safe-area-padding-horizontal(null, .7em);
+  }
+
+  &[side="left"] ion-item-option:first-child {
+    @include safe-area-padding-horizontal(.7em, null);
+  }
+
 }
 
 .item-option-ios {
diff --git a/packages/core/src/components/item-sliding/test/basic.html b/packages/core/src/components/item-sliding/test/basic.html
index 1ee8e272fc..b537d55548 100644
--- a/packages/core/src/components/item-sliding/test/basic.html
+++ b/packages/core/src/components/item-sliding/test/basic.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Ionic Item Sliding</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <script src="/dist/ionic.js"></script>
 </head>
 <body>
diff --git a/packages/core/src/components/item/item.ios.scss b/packages/core/src/components/item/item.ios.scss
index 1e71e9b879..f4dcc2d727 100644
--- a/packages/core/src/components/item/item.ios.scss
+++ b/packages/core/src/components/item/item.ios.scss
@@ -50,6 +50,7 @@ $item-ios-detail-push-svg:                "<svg xmlns='http://www.w3.org/2000/sv
 
 .item-ios {
   @include padding-horizontal($item-ios-padding-start, null);
+  @include safe-area-padding-horizontal($item-ios-padding-start, null);
   @include border-radius(0);
 
   position: relative;
@@ -112,6 +113,7 @@ $item-ios-detail-push-svg:                "<svg xmlns='http://www.w3.org/2000/sv
 
 .item-ios.item-block .item-inner {
   @include padding-horizontal(null, $item-ios-padding-end / 2);
+  @include safe-area-padding-horizontal(null, $item-ios-padding-end / 2);
 
   border-bottom: $hairlines-width solid $list-ios-border-color;
 }
@@ -199,9 +201,16 @@ $item-ios-detail-push-svg:                "<svg xmlns='http://www.w3.org/2000/sv
   .item-ios[detail-push] .item-inner,
   button.item-ios:not([detail-none]) .item-inner,
   a.item-ios:not([detail-none]) .item-inner {
+
+    $safe-area-position: calc(#{$item-ios-padding-end - 2} + constant(safe-area-inset-right));
+    $safe-area-position-env: calc(#{$item-ios-padding-end - 2} + env(safe-area-inset-right));
+
+
     @include svg-background-image($item-ios-detail-push-svg, true);
     @include padding-horizontal(null, 32px);
     @include background-position(end, $item-ios-padding-end - 2, center);
+    @include background-position(end, $safe-area-position, center);
+    @include background-position(end, $safe-area-position-env, center);
 
     background-repeat: no-repeat;
     background-size: 14px 14px;
diff --git a/packages/core/src/components/item/test/basic.html b/packages/core/src/components/item/test/basic.html
index cf4b322a63..9b2b293334 100644
--- a/packages/core/src/components/item/test/basic.html
+++ b/packages/core/src/components/item/test/basic.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Ionic Slides Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <script src="/dist/ionic.js"></script>
 </head>
 <body>
@@ -65,6 +65,31 @@
           <ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
         </ion-item>
 
+        <ion-item-group>
+          <ion-item-divider color="light">Divider</ion-item-divider>
+
+        <ion-item>
+          <ion-label>Item Large Button</ion-label>
+          <ion-button large slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Item Large Button</ion-label>
+          <ion-button large slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Item Small Button</ion-label>
+          <ion-button small slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
+          <ion-button small slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Item Default Button</ion-label>
+          <ion-button default slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
+          <ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
+        </ion-item>
+        </ion-item-group>
       </ion-content>
     </ion-page>
   </ion-app>
diff --git a/packages/core/src/components/toolbar/toolbar.ios.scss b/packages/core/src/components/toolbar/toolbar.ios.scss
index 89a2531df4..11c29edbeb 100644
--- a/packages/core/src/components/toolbar/toolbar.ios.scss
+++ b/packages/core/src/components/toolbar/toolbar.ios.scss
@@ -36,6 +36,7 @@ $navbar-ios-height:                         $toolbar-ios-height !default;
 
 .toolbar-ios {
   @include padding($toolbar-ios-padding);
+  @include safe-area-padding($toolbar-ios-padding);
 
   min-height: $toolbar-ios-height;
 }
diff --git a/packages/core/src/themes/ionic.mixins.scss b/packages/core/src/themes/ionic.mixins.scss
index d13721e2ff..3af55898e1 100644
--- a/packages/core/src/themes/ionic.mixins.scss
+++ b/packages/core/src/themes/ionic.mixins.scss
@@ -552,3 +552,61 @@
     }
   }
 }
+
+
+// Add safe-area-padding for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin safe-area-padding($top, $end: $top, $bottom: $top, $start: $end) {
+  $safe-area-start: null;
+  $safe-area-end: null;
+  $safe-area-start-env: null;
+  $safe-area-end-env: null;
+
+  @if ($start) {
+    $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
+    $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
+  }
+  @if ($end) {
+    $safe-area-end-env: calc(constant(safe-area-inset-right) + #{$end});
+    $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
+  }
+
+  @include padding($top, $end, $bottom, $start);
+
+  @media screen and (orientation: landscape) {
+    @include padding($top, $safe-area-end, $bottom, $safe-area-start);
+    @include padding($top, $safe-area-end-env, $bottom, $safe-area-start-env);
+  }
+}
+
+
+// Add safe area padding horizontal
+// @param {string} $start
+// @param {string} $end
+// ----------------------------------------------------------
+@mixin safe-area-padding-horizontal($start, $end: $start) {
+  $safe-area-end: null;
+  $safe-area-start: null;
+  $safe-area-start-env: null;
+  $safe-area-end-env: null;
+
+  @if ($end) {
+    $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
+    $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
+  }
+  @if ($start) {
+    $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
+    $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
+  }
+
+  @include padding-horizontal($start, $end);
+
+  @media screen and (orientation: landscape) {
+    @include padding-horizontal($safe-area-start, $safe-area-end);
+    @include padding-horizontal($safe-area-start-env, $safe-area-end-env);
+  }
+}
