diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss
index d5580d5ebe..663afff7cf 100644
--- a/core/src/components/back-button/back-button.ios.scss
+++ b/core/src/components/back-button/back-button.ios.scss
@@ -16,7 +16,10 @@
   border: 0;
   font-size: 17px;
   line-height: 1;
+
+  color: $back-button-ios-color;
   background-color: transparent;
+
   transform: translateZ(0);
 
   &.activated {
diff --git a/core/src/components/back-button/back-button.ios.vars.scss b/core/src/components/back-button/back-button.ios.vars.scss
index 5e598b4aaf..2a73e27347 100644
--- a/core/src/components/back-button/back-button.ios.vars.scss
+++ b/core/src/components/back-button/back-button.ios.vars.scss
@@ -1,5 +1,10 @@
 @import "../../themes/ionic.globals.ios";
 
+// iOS Back Button
+// --------------------------------------------------
 
-$back-button-ios-button-z-index:  $z-index-toolbar-buttons !default;
+/// @prop - Z index of the back button
+$back-button-ios-button-z-index:      $z-index-toolbar-buttons !default;
 
+/// @prop - Text color of the back button
+$back-button-ios-color:               $toolbar-ios-text-color !default;
diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss
index 2d5256300a..798857c7fb 100644
--- a/core/src/components/back-button/back-button.md.scss
+++ b/core/src/components/back-button/back-button.md.scss
@@ -1,7 +1,9 @@
 @import "./back-button";
+@import "./back-button.md.vars";
 
 // MD Back Button
 // --------------------------------------------------
+
 .back-button-md .back-button-inner {
   @include margin(2px, 6px, 0, 0);
   @include padding(0, 5px);
@@ -12,7 +14,10 @@
   font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;
+
+  color: $back-button-md-color;
   background-color: transparent;
+
   box-shadow: none;
 
   &.activated {
@@ -25,6 +30,7 @@
   @include margin(0);
   @include padding(0, 6px);
   @include text-align(start);
+
   font-size: 24px;
   font-weight: normal;
   line-height: 0.67;
diff --git a/core/src/components/back-button/back-button.md.vars.scss b/core/src/components/back-button/back-button.md.vars.scss
new file mode 100644
index 0000000000..fe560f3de8
--- /dev/null
+++ b/core/src/components/back-button/back-button.md.vars.scss
@@ -0,0 +1,7 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Back Button
+// --------------------------------------------------
+
+/// @prop - Text color of the back button
+$back-button-md-color:               $toolbar-md-text-color !default;