diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.scss b/packages/core/src/components/action-sheet/action-sheet.ios.scss
index f8fda62644..8633bcec17 100644
--- a/packages/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/packages/core/src/components/action-sheet/action-sheet.ios.scss
@@ -58,6 +58,9 @@ $action-sheet-ios-button-padding:                       18px !default;
 /// @prop - Text color of the action sheet button
 $action-sheet-ios-button-text-color:                    #007aff !default;
 
+/// @prop - Fill color of the action sheet button icon
+$action-sheet-ios-button-icon-fill-color:               $action-sheet-ios-button-text-color !default;
+
 /// @prop - Font size of the action sheet button
 $action-sheet-ios-button-font-size:                     2rem !default;
 
@@ -79,6 +82,9 @@ $action-sheet-ios-button-background-activated:          #ebebeb !default;
 /// @prop - Destructive text color of the action sheet button
 $action-sheet-ios-button-destructive-text-color:        #f53d3d !default;
 
+/// @prop - Destructive fill color of the action sheet button icon
+$action-sheet-ios-button-destructive-icon-fill-color:   $action-sheet-ios-button-destructive-text-color !default;
+
 /// @prop - Background color of the action sheet cancel button
 $action-sheet-ios-button-cancel-background:             #fff !default;
 
@@ -132,6 +138,10 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
   background: $action-sheet-ios-button-background;
 }
 
+.action-sheet-ios .action-sheet-button {
+  fill: $action-sheet-ios-button-icon-fill-color;
+}
+
 .action-sheet-ios .action-sheet-button:last-child {
   border-bottom-color: transparent;
 }
@@ -153,6 +163,10 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
   color: $action-sheet-ios-button-destructive-text-color;
 }
 
+.action-sheet-ios .action-sheet-destructive .action-sheet-icon {
+  fill: $action-sheet-ios-button-destructive-icon-fill-color;
+}
+
 .action-sheet-ios .action-sheet-cancel {
   font-weight: $action-sheet-ios-button-cancel-font-weight;
   background: $action-sheet-ios-button-cancel-background;
diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx
index 08b9485a96..85da0152d8 100644
--- a/packages/core/src/components/action-sheet/action-sheet.tsx
+++ b/packages/core/src/components/action-sheet/action-sheet.tsx
@@ -146,6 +146,7 @@ export class ActionSheet {
     if (this.cssClass) {
       userCssClass += ' ' + this.cssClass;
     }
+
     return [
       <ion-backdrop
         onClick={this.backdropClick.bind(this)}
diff --git a/packages/core/src/components/action-sheet/test/basic.html b/packages/core/src/components/action-sheet/test/basic.html
new file mode 100644
index 0000000000..c134e2a0aa
--- /dev/null
+++ b/packages/core/src/components/action-sheet/test/basic.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Action Sheet Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Action Sheet</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content padding>
+      <ion-button block onclick="presentActionSheet1()">Present Action Sheet 1</ion-button>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    function presentActionSheet1() {
+      console.log('presenting');
+
+      Ionic.controller('action-sheet', {
+        title: "Albums",
+        buttons: [{
+          text: 'Delete',
+          role: 'destructive',
+          icon: 'trash',
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        }, {
+          text: 'Share',
+          icon: 'share',
+          handler: () => {
+            console.log('Share clicked');
+          }
+        }, {
+          text: 'Play (open modal)',
+          icon: 'arrow-dropright-circle',
+          handler: () => {
+            console.log('Play clicked');
+          }
+        }, {
+          text: 'Favorite',
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      })
+      .then(actionSheet => {
+        actionSheet.present()
+      });
+    }
+  </script>
+</body>
+
+</html>
