fix(reorder): use correct icon size and opacity per mode

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
 // --------------------------------------------------
 

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;
+}

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;
+

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;
+}

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;

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;
-}

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'
   }