diff --git a/packages/core/src/components/item/item.md.scss b/packages/core/src/components/item/item.md.scss
index 83cca9cd8b..d4ae439e3b 100644
--- a/packages/core/src/components/item/item.md.scss
+++ b/packages/core/src/components/item/item.md.scss
@@ -157,15 +157,6 @@
 }
 
 
-// Item reorder
-// --------------------------------------------------
-
-.item-md ion-reorder {
-  font-size: 1.5em;
-  opacity: .3;
-}
-
-
 // Generate Material Design Item and Item Divider Colors
 // --------------------------------------------------
 
diff --git a/packages/core/src/components/reorder/reorder.ios.scss b/packages/core/src/components/reorder/reorder.ios.scss
new file mode 100644
index 0000000000..b6b2d3e8ae
--- /dev/null
+++ b/packages/core/src/components/reorder/reorder.ios.scss
@@ -0,0 +1,10 @@
+@import "./reorder";
+@import "./reorder.ios.vars";
+
+// iOS Reorder
+// --------------------------------------------------
+
+.reorder-ios .reorder-icon {
+  font-size: $reorder-ios-icon-font-size;
+  opacity: $reorder-ios-icon-font-size;
+}
diff --git a/packages/core/src/components/reorder/reorder.ios.vars.scss b/packages/core/src/components/reorder/reorder.ios.vars.scss
new file mode 100644
index 0000000000..07f7daba25
--- /dev/null
+++ b/packages/core/src/components/reorder/reorder.ios.vars.scss
@@ -0,0 +1,11 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Reorder
+// --------------------------------------------------
+
+/// @prop - Font size of the reorder icon
+$reorder-ios-icon-font-size:      2em !default;
+
+/// @prop - Opacity of the reorder icon
+$reorder-ios-icon-opacity:        .4 !default;
+
diff --git a/packages/core/src/components/reorder/reorder.md.scss b/packages/core/src/components/reorder/reorder.md.scss
new file mode 100644
index 0000000000..ff7ed86502
--- /dev/null
+++ b/packages/core/src/components/reorder/reorder.md.scss
@@ -0,0 +1,10 @@
+@import "./reorder";
+@import "./reorder.md.vars";
+
+// Material Design Reorder
+// --------------------------------------------------
+
+.reorder-md .reorder-icon {
+  font-size: $reorder-md-icon-font-size;
+  opacity: $reorder-md-icon-opacity;
+}
diff --git a/packages/core/src/components/reorder/reorder.md.vars.scss b/packages/core/src/components/reorder/reorder.md.vars.scss
new file mode 100644
index 0000000000..b953795c4a
--- /dev/null
+++ b/packages/core/src/components/reorder/reorder.md.vars.scss
@@ -0,0 +1,10 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Reorder
+// --------------------------------------------------
+
+/// @prop - Font size of the reorder icon
+$reorder-md-icon-font-size:      1.8em !default;
+
+/// @prop - Opacity of the reorder icon
+$reorder-md-icon-opacity:        .3 !default;
\ No newline at end of file
diff --git a/packages/core/src/components/reorder/reorder.scss b/packages/core/src/components/reorder/reorder.scss
index b06fcdd1ce..bf507e6aaf 100644
--- a/packages/core/src/components/reorder/reorder.scss
+++ b/packages/core/src/components/reorder/reorder.scss
@@ -67,11 +67,3 @@
 .item .reorder[slot] {
   @include margin(0, null);
 }
-
-.item .reorder-icon {
-  font-size: 2em;
-
-  opacity: .4;
-
-  fill: currentColor;
-}
diff --git a/packages/core/src/components/reorder/reorder.tsx b/packages/core/src/components/reorder/reorder.tsx
index 016da763ee..2216252f8e 100644
--- a/packages/core/src/components/reorder/reorder.tsx
+++ b/packages/core/src/components/reorder/reorder.tsx
@@ -3,7 +3,10 @@ import { Component, Element, State } from '@stencil/core';
 
 @Component({
   tag: 'ion-reorder',
-  styleUrl: 'reorder.scss',
+  styleUrls: {
+    ios: 'reorder.ios.scss',
+    md: 'reorder.md.scss',
+  },
   host: {
     theme: 'reorder'
   }