diff --git a/packages/core/src/components/segment-button/readme.md b/packages/core/src/components/segment-button/readme.md
index afae4865a4..4f0598df11 100644
--- a/packages/core/src/components/segment-button/readme.md
+++ b/packages/core/src/components/segment-button/readme.md
@@ -1,29 +1,53 @@
 # ion-segment-button
 
-Segment buttons are a group of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. Only one segment button can be selected at a time.
+Segment buttons are groups of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. A segment button can be checked by default by adding the `checked` attribute or by setting the `value` of the segment to the `value` of the segment button. Only one segment button should be selected at a time.
 
 ```html
-<ion-content>
-  <!-- Segment buttons with icons -->
-  <ion-segment>
-    <ion-segment-button value="camera">
-      <ion-icon name="camera"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="bookmark">
-      <ion-icon name="bookmark"></ion-icon>
-    </ion-segment-button>
-  </ion-segment>
+<!-- Segment buttons with text -->
+<ion-segment>
+  <ion-segment-button>
+    Friends
+  </ion-segment-button>
+  <ion-segment-button>
+    Enemies
+  </ion-segment-button>
+</ion-segment>
 
-  <!-- Segment buttons with text -->
-  <ion-segment>
-    <ion-segment-button value="friends">
-      Friends
-    </ion-segment-button>
-    <ion-segment-button value="enemies">
-      Enemies
-    </ion-segment-button>
-  </ion-segment>
-</ion-content>
+<!-- Segment buttons with the first checked and the last disabled -->
+<ion-segment>
+  <ion-segment-button checked>
+    Paid
+  </ion-segment-button>
+  <ion-segment-button>
+    Free
+  </ion-segment-button>
+  <ion-segment-button disabled>
+    Top
+  </ion-segment-button>
+</ion-segment>
+
+<!-- Segment buttons with values and icons -->
+<ion-segment>
+  <ion-segment-button value="camera">
+    <ion-icon name="camera"></ion-icon>
+  </ion-segment-button>
+  <ion-segment-button value="bookmark">
+    <ion-icon name="bookmark"></ion-icon>
+  </ion-segment-button>
+</ion-segment>
+
+<!-- Segment with a value that checks the last button -->
+<ion-segment value="shared">
+  <ion-segment-button value="bookmarks">
+    Bookmarks
+  </ion-segment-button>
+  <ion-segment-button value="reading">
+    Reading List
+  </ion-segment-button>
+  <ion-segment-button value="shared">
+    Shared Links
+  </ion-segment-button>
+</ion-segment>
 ```
 
 <!-- Auto Generated Below -->
diff --git a/packages/core/src/components/segment-button/segment-button.ios.scss b/packages/core/src/components/segment-button/segment-button.ios.scss
new file mode 100644
index 0000000000..23387d2322
--- /dev/null
+++ b/packages/core/src/components/segment-button/segment-button.ios.scss
@@ -0,0 +1,151 @@
+@import "./segment-button";
+@import "./segment-button.ios.vars";
+
+// iOS Segment Button
+// --------------------------------------------------
+
+ion-segment-button {
+  &:first-of-type .segment-button-ios {
+    @include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
+    @include margin-horizontal(null, 0);
+  }
+
+  &:not(:first-of-type) .segment-button-ios {
+    border-left-width: 0;
+  }
+
+  &:last-of-type .segment-button-ios {
+    @include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0);
+    @include margin-horizontal(0, null);
+
+    border-left-width: 0;
+  }
+}
+
+.segment-button-ios {
+  flex: 1;
+
+  height: $segment-button-ios-height;
+
+  border-width: $segment-button-ios-border-width;
+  border-style: solid;
+  border-color: $segment-button-ios-background-color-activated;
+
+  font-size: $segment-button-ios-font-size;
+  line-height: $segment-button-ios-line-height;
+
+  color: $segment-button-ios-background-color-activated;
+  background-color: $segment-button-ios-background-color;
+
+  ion-icon {
+    font-size: $segment-button-ios-icon-size;
+    line-height: $segment-button-ios-icon-line-height;
+  }
+
+  &.segment-activated {
+    color: $segment-button-ios-text-color;
+    background-color: $segment-button-ios-background-color-activated;
+    transition: $segment-button-ios-transition-activated;
+  }
+
+  &:hover:not(.segment-activated) {
+    background-color: $segment-button-ios-background-color-hover;
+    transition: $segment-button-ios-transition-hover;
+  }
+
+  &:active:not(.segment-activated) {
+    background-color: $segment-button-ios-background-color-active;
+    transition: $segment-button-ios-transition-active;
+  }
+}
+
+// iOS Segment Button RTL
+// --------------------------------------------------
+
+[dir="rtl"] ion-segment-button {
+  &:first-of-type .segment-button-ios {
+    border-left-width: 0;
+  }
+
+  &:last-of-type .segment-button-ios {
+    border-left-width: $segment-button-ios-border-width;
+  }
+}
+
+
+// iOS Segment Button Disabled
+// --------------------------------------------------
+
+.segment-ios .segment-button-disabled {
+  color: $segment-button-ios-background-color-disabled;
+
+  pointer-events: none;
+}
+
+
+// iOS Segment Button in Toolbar
+// --------------------------------------------------
+
+.toolbar-ios ion-segment-button {
+  max-width: $segment-button-ios-toolbar-button-max-width;
+}
+
+.toolbar-ios .segment-button-ios {
+  height: $segment-button-ios-toolbar-button-height;
+
+  font-size: $segment-button-ios-toolbar-font-size;
+  line-height: $segment-button-ios-toolbar-line-height;
+
+  ion-icon {
+    font-size: $segment-button-ios-toolbar-icon-size;
+    line-height: $segment-button-ios-toolbar-icon-line-height;
+  }
+}
+
+
+// iOS Segment Button Mixin
+// --------------------------------------------------
+
+@mixin ios-segment-button($color-name) {
+  $color-base: ion-color($colors-ios, $color-name, base, ios);
+  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
+
+  .segment-ios-#{$color-name} {
+
+    .segment-button {
+      border-color: $color-base;
+      color: $color-base;
+
+      &:hover:not(.segment-activated) {
+        background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
+      }
+
+      &:active:not(.segment-activated) {
+        background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
+      }
+
+      &.segment-activated {
+        color: $color-contrast;
+        background-color: $color-base;
+      }
+    }
+
+    .segment-button-disabled {
+      color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-medium);
+    }
+  }
+}
+
+
+// iOS Segment Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+  $color-base: ion-color($colors-ios, $color-name, base, ios);
+
+  @include ios-segment-button($color-name);
+
+  .toolbar-ios-#{$color-name} .segment-button-ios.segment-activated {
+    color: $color-base;
+  }
+}
diff --git a/packages/core/src/components/segment-button/segment-button.ios.vars.scss b/packages/core/src/components/segment-button/segment-button.ios.vars.scss
new file mode 100644
index 0000000000..e40a51efe3
--- /dev/null
+++ b/packages/core/src/components/segment-button/segment-button.ios.vars.scss
@@ -0,0 +1,79 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Segment Button
+// --------------------------------------------------
+
+/// @prop - Background of the segment button
+$segment-button-ios-background-color:                 transparent !default;
+
+/// @prop - Background of the activated segment button
+$segment-button-ios-background-color-activated:       ion-color($colors-ios, primary, base, ios) !default;
+
+/// @prop - Background of the segment button when hovered
+$segment-button-ios-background-color-hover:           ion-color-alpha($colors-ios, primary, $alpha-ios-lowest) !default;
+
+/// @prop - Background of the segment button when active
+$segment-button-ios-background-color-active:          ion-color-alpha($colors-ios, primary, $alpha-ios-low) !default;
+
+/// @prop - Background of the activated segment button when active
+$segment-button-ios-background-color-disabled:        ion-color-alpha($colors-ios, primary, $alpha-ios-medium) !default;
+
+/// @prop - Text color of the segment button
+$segment-button-ios-text-color:                       ion-color($colors-ios, primary, contrast, ios) !default;
+
+/// @prop - Transition of the activated segment button
+$segment-button-ios-transition-activated:             100ms all linear !default;
+
+/// @prop - Transition of the segment button on hover
+$segment-button-ios-transition-hover:                 100ms all linear !default;
+
+/// @prop - Transition of the segment button when pressed
+$segment-button-ios-transition-active:                100ms all linear !default;
+
+/// @prop - Border width of the segment button
+$segment-button-ios-border-width:                     1px !default;
+
+/// @prop - Height of the segment button
+$segment-button-ios-height:                           32px !default;
+
+/// @prop - Line height of the segment button
+$segment-button-ios-line-height:                      28px !default;
+
+/// @prop - Font size of the segment button
+$segment-button-ios-font-size:                        13px !default;
+
+/// @prop - Border radius of the segment button
+$segment-button-ios-border-radius:                    4px !default;
+
+/// @prop - Size of an icon in the segment button
+$segment-button-ios-icon-size:                        26px !default;
+
+/// @prop - Line height of an icon in the segment button
+$segment-button-ios-icon-line-height:                 28px !default;
+
+/// @prop - Max width of the segment button in a toolbar
+$segment-button-ios-toolbar-button-max-width:         100px !default;
+
+/// @prop - Height of the segment button in a toolbar
+$segment-button-ios-toolbar-button-height:            26px !default;
+
+/// @prop - Line height of the segment button in a toolbar
+$segment-button-ios-toolbar-line-height:              22px !default;
+
+/// @prop - Font size of the segment button in a toolbar
+$segment-button-ios-toolbar-font-size:                12px !default;
+
+/// @prop - Size of an icon in the segment button in a toolbar
+$segment-button-ios-toolbar-icon-size:                22px !default;
+
+/// @prop - Line height of an icon in the segment button in a toolbar
+$segment-button-ios-toolbar-icon-line-height:         24px !default;
+
+/// @prop - Opacity of the segment button on hover
+$segment-button-ios-opacity-hover:                    .1 !default;
+
+/// @prop - Opacity of the segment button when pressed
+$segment-button-ios-opacity-active:                   .16 !default;
+
+/// @prop - Opacity of the disabled segment button
+$segment-button-ios-opacity-disabled:                 .3 !default;
diff --git a/packages/core/src/components/segment-button/segment-button.md.scss b/packages/core/src/components/segment-button/segment-button.md.scss
new file mode 100644
index 0000000000..97f24f1155
--- /dev/null
+++ b/packages/core/src/components/segment-button/segment-button.md.scss
@@ -0,0 +1,66 @@
+@import "./segment-button";
+@import "./segment-button.md.vars";
+
+// Material Design Segment
+// --------------------------------------------------
+
+.segment-button-md {
+  @include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
+
+  flex: 1;
+
+  height: $segment-button-md-height;
+
+  border-bottom-width: $segment-button-md-border-bottom-width;
+  border-bottom-style: solid;
+  border-bottom-color: $segment-button-md-border-bottom-color;
+
+  font-size: $segment-button-md-font-size;
+  font-weight: $segment-button-md-font-weight;
+  line-height: $segment-button-md-line-height;
+  text-transform: uppercase;
+
+  color: $segment-button-md-text-color;
+  background-color: transparent;
+  opacity: $segment-button-md-opacity;
+  transition: $segment-button-md-transition;
+
+  ion-icon {
+    font-size: $segment-button-md-icon-size;
+    line-height: $segment-button-md-icon-line-height;
+  }
+
+  &.activated,
+  &.segment-activated {
+    border-color: $segment-button-md-border-color-activated;
+    opacity: $segment-button-md-opacity-activated;
+  }
+}
+
+
+// Material Design Segment Button Disabled
+// --------------------------------------------------
+
+.segment-md .segment-button-disabled {
+  opacity: $segment-button-md-opacity-disabled;
+
+  pointer-events: none;
+}
+
+
+// Material Design Segment Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+  $color-base: ion-color($colors-md, $color-name, base, md);
+
+  .segment-md-#{$color-name} .segment-button {
+    color: $color-base;
+
+    &.activated,
+    &.segment-activated {
+      border-color: $color-base;
+      color: $color-base;
+    }
+  }
+}
diff --git a/packages/core/src/components/segment-button/segment-button.md.vars.scss b/packages/core/src/components/segment-button/segment-button.md.vars.scss
new file mode 100644
index 0000000000..494d37b0a1
--- /dev/null
+++ b/packages/core/src/components/segment-button/segment-button.md.vars.scss
@@ -0,0 +1,58 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Segment Button
+// --------------------------------------------------
+
+/// @prop - Text color of the segment button
+$segment-button-md-text-color:                 $toolbar-md-color-active !default;
+
+/// @prop - Width of the bottom border on the segment button
+$segment-button-md-border-bottom-width:        2px !default;
+
+/// @prop - Color of the bottom border on the segment button
+$segment-button-md-border-bottom-color:        rgba(#000, .10) !default;
+
+/// @prop - Opacity of the segment button
+$segment-button-md-opacity:                    .7 !default;
+
+/// @prop - Border color of the activated segment button
+$segment-button-md-border-color-activated:     $toolbar-md-color-active !default;
+
+/// @prop - Opacity of the activated segment button
+$segment-button-md-opacity-activated:          1 !default;
+
+/// @prop - Opacity of the disabled segment button
+$segment-button-md-opacity-disabled:           .3 !default;
+
+/// @prop - Padding top of the segment button
+$segment-button-md-padding-top:                0 !default;
+
+/// @prop - Padding end of the segment button
+$segment-button-md-padding-end:                6px !default;
+
+/// @prop - Padding bottom of the segment button
+$segment-button-md-padding-bottom:             $segment-button-md-padding-top !default;
+
+/// @prop - Padding start of the segment button
+$segment-button-md-padding-start:              $segment-button-md-padding-end !default;
+
+/// @prop - Height of the segment button
+$segment-button-md-height:                     42px !default;
+
+/// @prop - Line height of the segment button
+$segment-button-md-line-height:                40px !default;
+
+/// @prop - Font size of the segment button
+$segment-button-md-font-size:                  12px !default;
+
+/// @prop - Font weight of the segment button
+$segment-button-md-font-weight:                500 !default;
+
+/// @prop - Transition of the segment button
+$segment-button-md-transition:                 100ms all linear !default;
+
+/// @prop - Size of an icon in the segment button
+$segment-button-md-icon-size:                  26px !default;
+
+/// @prop - Line height of an icon in the segment button
+$segment-button-md-icon-line-height:           $segment-button-md-line-height !default;
diff --git a/packages/core/src/components/segment-button/segment-button.scss b/packages/core/src/components/segment-button/segment-button.scss
new file mode 100644
index 0000000000..722c6c377b
--- /dev/null
+++ b/packages/core/src/components/segment-button/segment-button.scss
@@ -0,0 +1,37 @@
+@import "../../themes/ionic.globals";
+
+// Segment Button
+// --------------------------------------------------
+
+ion-segment-button {
+  display: flex;
+
+  flex: 1;
+}
+
+.segment-button {
+  @include border-radius(0);
+  @include margin-horizontal(0);
+  @include text-align(center);
+
+  position: relative;
+  display: block;
+
+  overflow: hidden;
+
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+
+  font-kerning: none;
+  user-select: none;
+  contain: content;
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
diff --git a/packages/core/src/components/segment-button/segment-button.tsx b/packages/core/src/components/segment-button/segment-button.tsx
index cbe183a7a2..bdbe370294 100644
--- a/packages/core/src/components/segment-button/segment-button.tsx
+++ b/packages/core/src/components/segment-button/segment-button.tsx
@@ -4,7 +4,11 @@ import { createThemedClasses, getElementClassMap } from '../../utils/theme';
 let ids = 0;
 
 @Component({
-  tag: 'ion-segment-button'
+  tag: 'ion-segment-button',
+  styleUrls: {
+    ios: 'segment-button.ios.scss',
+    md: 'segment-button.md.scss'
+  }
 })
 export class SegmentButton {
   styleTmr: any;
diff --git a/packages/core/src/components/segment/segment.ios.scss b/packages/core/src/components/segment/segment.ios.scss
index 72a5103cc4..ab4c3065af 100644
--- a/packages/core/src/components/segment/segment.ios.scss
+++ b/packages/core/src/components/segment/segment.ios.scss
@@ -8,80 +8,8 @@
   font-family: $segment-ios-font-family;
 }
 
-.segment-ios ion-segment-button {
-  &:first-of-type .segment-button {
-    @include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
-    @include margin-horizontal(null, 0);
-  }
-
-  &:not(:first-of-type) .segment-button {
-    border-left-width: 0;
-  }
-
-  &:last-of-type .segment-button {
-    @include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0);
-    @include margin-horizontal(0, null);
-
-    border-left-width: 0;
-  }
-}
-
-.segment-ios .segment-button {
-  flex: 1;
-
-  height: $segment-button-ios-height;
-
-  border-width: $segment-button-ios-border-width;
-  border-style: solid;
-  border-color: $segment-button-ios-background-color-activated;
-
-  font-size: $segment-button-ios-font-size;
-  line-height: $segment-button-ios-line-height;
-
-  color: $segment-button-ios-background-color-activated;
-  background-color: $segment-button-ios-background-color;
-
-  ion-icon {
-    font-size: $segment-button-ios-icon-size;
-    line-height: $segment-button-ios-icon-line-height;
-  }
-
-  &.segment-activated {
-    color: $segment-button-ios-text-color;
-    background-color: $segment-button-ios-background-color-activated;
-    transition: $segment-button-ios-transition-activated;
-  }
-
-  &:hover:not(.segment-activated) {
-    background-color: $segment-button-ios-background-color-hover;
-    transition: $segment-button-ios-transition-hover;
-  }
-
-  &:active:not(.segment-activated) {
-    background-color: $segment-button-ios-background-color-active;
-    transition: $segment-button-ios-transition-active;
-  }
-}
-
-[dir="rtl"] .segment-ios ion-segment-button {
-  &:first-of-type .segment-button {
-    border-left-width: 0;
-  }
-
-  &:last-of-type .segment-button {
-    border-left-width: $segment-button-ios-border-width;
-  }
-}
-
-
 .segment-ios.segment-disabled {
-  opacity: .4;
-
-  pointer-events: none;
-}
-
-.segment-ios .segment-button-disabled {
-  color: $segment-button-ios-background-color-disabled;
+  opacity: $segment-ios-opacity-disabled;
 
   pointer-events: none;
 }
@@ -94,69 +22,4 @@
   @include position(0, 0, 0, 0);
 
   position: absolute;
-}
-
-.toolbar-ios ion-segment-button {
-  max-width: $segment-button-ios-toolbar-button-max-width;
-}
-
-.toolbar-ios .segment-button {
-  height: $segment-button-ios-toolbar-button-height;
-
-  font-size: $segment-button-ios-toolbar-font-size;
-  line-height: $segment-button-ios-toolbar-line-height;
-
-  ion-icon {
-    font-size: $segment-button-ios-toolbar-icon-size;
-    line-height: $segment-button-ios-toolbar-icon-line-height;
-  }
-}
-
-
-// iOS Segment Button Mixin
-// --------------------------------------------------
-
-@mixin ios-segment-button($color-name) {
-  $color-base: ion-color($colors-ios, $color-name, base, ios);
-  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
-
-  .segment-ios-#{$color-name} {
-
-    .segment-button {
-      border-color: $color-base;
-      color: $color-base;
-
-
-      &:hover:not(.segment-activated) {
-        background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
-      }
-
-      &:active:not(.segment-activated) {
-        background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
-      }
-
-      &.segment-activated {
-        color: $color-contrast;
-        background-color: $color-base;
-      }
-    }
-
-    .segment-button-disabled {
-      color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-medium);
-    }
-  }
-}
-
-
-// iOS Segment Color Generation
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-ios {
-  $color-base: ion-color($colors-ios, $color-name, base, ios);
-
-  @include ios-segment-button($color-name);
-
-  .toolbar-ios-#{$color-name} .segment-ios .segment-button.segment-activated {
-    color: $color-base;
-  }
-}
+}
\ No newline at end of file
diff --git a/packages/core/src/components/segment/segment.ios.vars.scss b/packages/core/src/components/segment/segment.ios.vars.scss
index eee499c800..d22e2ad822 100644
--- a/packages/core/src/components/segment/segment.ios.vars.scss
+++ b/packages/core/src/components/segment/segment.ios.vars.scss
@@ -6,80 +6,5 @@
 /// @prop - Background of the segment button
 $segment-ios-font-family:                       $font-family-ios-base !default;
 
-// TODO either move to button or rename
-// ---------------------------------------------
-
-/// @prop - Background of the segment button
-$segment-button-ios-background-color:                 transparent !default;
-
-/// @prop - Background of the activated segment button
-$segment-button-ios-background-color-activated:       ion-color($colors-ios, primary, base, ios) !default;
-
-/// @prop - Background of the segment button when hovered
-$segment-button-ios-background-color-hover:           ion-color-alpha($colors-ios, primary, $alpha-ios-lowest) !default;
-
-/// @prop - Background of the segment button when active
-$segment-button-ios-background-color-active:          ion-color-alpha($colors-ios, primary, $alpha-ios-low) !default;
-
-/// @prop - Background of the activated segment button when active
-$segment-button-ios-background-color-disabled:        ion-color-alpha($colors-ios, primary, $alpha-ios-medium) !default;
-
-/// @prop - Text color of the segment button
-$segment-button-ios-text-color:                       ion-color($colors-ios, primary, contrast, ios) !default;
-
-/// @prop - Transition of the activated segment button
-$segment-button-ios-transition-activated:             100ms all linear !default;
-
-/// @prop - Transition of the segment button on hover
-$segment-button-ios-transition-hover:                 100ms all linear !default;
-
-/// @prop - Transition of the segment button when pressed
-$segment-button-ios-transition-active:                100ms all linear !default;
-
-/// @prop - Border width of the segment button
-$segment-button-ios-border-width:                     1px !default;
-
-/// @prop - Height of the segment button
-$segment-button-ios-height:                           32px !default;
-
-/// @prop - Line height of the segment button
-$segment-button-ios-line-height:                      28px !default;
-
-/// @prop - Font size of the segment button
-$segment-button-ios-font-size:                        13px !default;
-
-/// @prop - Border radius of the segment button
-$segment-button-ios-border-radius:                    4px !default;
-
-/// @prop - Size of an icon in the segment button
-$segment-button-ios-icon-size:                        26px !default;
-
-/// @prop - Line height of an icon in the segment button
-$segment-button-ios-icon-line-height:                 28px !default;
-
-/// @prop - Max width of the segment button in a toolbar
-$segment-button-ios-toolbar-button-max-width:         100px !default;
-
-/// @prop - Height of the segment button in a toolbar
-$segment-button-ios-toolbar-button-height:            26px !default;
-
-/// @prop - Line height of the segment button in a toolbar
-$segment-button-ios-toolbar-line-height:              22px !default;
-
-/// @prop - Font size of the segment button in a toolbar
-$segment-button-ios-toolbar-font-size:                12px !default;
-
-/// @prop - Size of an icon in the segment button in a toolbar
-$segment-button-ios-toolbar-icon-size:                22px !default;
-
-/// @prop - Line height of an icon in the segment button in a toolbar
-$segment-button-ios-toolbar-icon-line-height:         24px !default;
-
-/// @prop - Opacity of the segment button on hover
-$segment-button-ios-opacity-hover:                    .1 !default;
-
-/// @prop - Opacity of the segment button when pressed
-$segment-button-ios-opacity-active:                   .16 !default;
-
-/// @prop - Opacity of the disabled segment button
-$segment-button-ios-opacity-disabled:                 .3 !default;
+/// @prop - Opacity of the disabled segment
+$segment-ios-opacity-disabled:                  .4 !default;
diff --git a/packages/core/src/components/segment/segment.md.scss b/packages/core/src/components/segment/segment.md.scss
index 86f7fd7866..da1f8db335 100644
--- a/packages/core/src/components/segment/segment.md.scss
+++ b/packages/core/src/components/segment/segment.md.scss
@@ -8,84 +8,8 @@
   font-family: $segment-md-font-family;
 }
 
-.segment-md .segment-button {
-  @include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
-
-  flex: 1;
-
-  width: 0;
-  height: $segment-button-md-height;
-
-  border-bottom-width: $segment-button-md-border-bottom-width;
-  border-bottom-style: solid;
-  border-bottom-color: $segment-button-md-border-bottom-color;
-
-  font-size: $segment-button-md-font-size;
-  font-weight: 500;
-  line-height: $segment-button-md-line-height;
-  text-transform: uppercase;
-
-  color: $segment-button-md-text-color-active;
-  background-color: transparent;
-  opacity: $segment-button-md-opacity;
-  transition: 100ms all linear;
-
-  ion-icon {
-    font-size: $segment-button-md-icon-size;
-    line-height: $segment-button-md-icon-line-height;
-  }
-
-  &.activated,
-  &.segment-activated {
-    border-color: $segment-button-md-border-color-activated;
-    opacity: $segment-button-md-opacity-activated;
-  }
-}
-
-.segment-md.segment-disabled,
-.segment-md .segment-button-disabled {
-  opacity: $segment-button-md-opacity-disabled;
+.segment-md.segment-disabled {
+  opacity: $segment-md-opacity-disabled;
 
   pointer-events: none;
 }
-
-.toolbar {
-
-  .segment-md {
-    @include margin(0, auto);
-  }
-
-  .segment-md .segment-button.activated,
-  .segment-md .segment-button.segment-activated {
-    opacity: 1;
-  }
-
-}
-
-
-// Material Design Segment Button Mixin
-// --------------------------------------------------
-
-@mixin md-segment-button($color-name) {
-  $color-base: ion-color($colors-md, $color-name, base, md);
-
-  .segment-md-#{$color-name} .segment-button {
-    color: $color-base;
-
-    &.activated,
-    &.segment-activated {
-      border-color: $color-base;
-      color: $color-base;
-      opacity: 1;
-    }
-  }
-
-}
-
-
-// Material Design Segment Color Generation
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-md {
-  @include md-segment-button($color-name);
-}
diff --git a/packages/core/src/components/segment/segment.md.vars.scss b/packages/core/src/components/segment/segment.md.vars.scss
index abb2d5e91f..f66af5d797 100644
--- a/packages/core/src/components/segment/segment.md.vars.scss
+++ b/packages/core/src/components/segment/segment.md.vars.scss
@@ -6,50 +6,5 @@
 /// @prop - Background of the segment button
 $segment-md-font-family:                       $font-family-md-base !default;
 
-/// @prop - Text color of the activated segment button
-$segment-button-md-text-color-active:         $toolbar-md-color-active !default;
-
-/// @prop - Border color of the activated segment button
-$segment-button-md-border-color-activated:    $toolbar-md-color-active !default;
-
-/// @prop - Width of the bottom border on the segment button
-$segment-button-md-border-bottom-width:        2px !default;
-
-/// @prop - Color of the bottom border on the segment button
-$segment-button-md-border-bottom-color:        rgba(#000, .10) !default;
-
-/// @prop - Opacity of the segment button
-$segment-button-md-opacity:                    .7 !default;
-
-/// @prop - Opacity of the activated segment button
-$segment-button-md-opacity-activated:          1 !default;
-
-/// @prop - Opacity of the disabled segment button
-$segment-button-md-opacity-disabled:           .3 !default;
-
-/// @prop - Padding top of the segment button
-$segment-button-md-padding-top:                0 !default;
-
-/// @prop - Padding end of the segment button
-$segment-button-md-padding-end:                6px !default;
-
-/// @prop - Padding bottom of the segment button
-$segment-button-md-padding-bottom:             $segment-button-md-padding-top !default;
-
-/// @prop - Padding start of the segment button
-$segment-button-md-padding-start:              $segment-button-md-padding-end !default;
-
-/// @prop - Height of the segment button
-$segment-button-md-height:                     42px !default;
-
-/// @prop - Line height of the segment button
-$segment-button-md-line-height:                40px !default;
-
-/// @prop - Font size of the segment button
-$segment-button-md-font-size:                  12px !default;
-
-/// @prop - Size of an icon in the segment button
-$segment-button-md-icon-size:                  26px !default;
-
-/// @prop - Line height of an icon in the segment button
-$segment-button-md-icon-line-height:           $segment-button-md-line-height !default;
+/// @prop - Opacity of the disabled segment
+$segment-md-opacity-disabled:                  .3 !default;
diff --git a/packages/core/src/components/segment/segment.scss b/packages/core/src/components/segment/segment.scss
index 740cb40b30..e4defa0bac 100644
--- a/packages/core/src/components/segment/segment.scss
+++ b/packages/core/src/components/segment/segment.scss
@@ -12,36 +12,3 @@ ion-segment {
 
   width: 100%;
 }
-
-ion-segment-button {
-  display: flex;
-
-  flex: 1;
-}
-
-.segment-button {
-  @include border-radius(0);
-  @include margin-horizontal(0);
-  @include text-align(center);
-
-  position: relative;
-  display: block;
-
-  overflow: hidden;
-
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-
-  font-kerning: none;
-  user-select: none;
-  contain: content;
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
-}
diff --git a/packages/core/src/components/segment/test/basic/index.html b/packages/core/src/components/segment/test/basic/index.html
index 3414242212..ab32c164ec 100644
--- a/packages/core/src/components/segment/test/basic/index.html
+++ b/packages/core/src/components/segment/test/basic/index.html
@@ -32,6 +32,34 @@
           </ion-segment>
         </ion-toolbar>
 
+        <ion-toolbar>
+          <ion-segment name="dynamicPropDisable" disabled color="danger">
+            <ion-segment-button value="Bookmarks">
+              Bookmarks
+            </ion-segment-button>
+            <ion-segment-button value="Reading List">
+              Reading List
+            </ion-segment-button>
+            <ion-segment-button value="Shared Links">
+              Shared Links
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-segment name="dynamicAttrElem" color="secondary" value="active">
+            <ion-segment-button value="active">
+              Active
+            </ion-segment-button>
+            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
+              Disabled
+            </ion-segment-button>
+            <ion-segment-button value="inactive" disabled="false">
+              Inactive
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
         <ion-toolbar>
           <ion-segment color="danger">
             <ion-segment-button value="sunny">
@@ -68,7 +96,7 @@
             </ion-segment-button>
           </ion-segment>
 
-          <ion-segment id="dynamicPropDisable" disabled color="danger">
+          <ion-segment name="dynamicPropDisable" disabled color="danger">
             <ion-segment-button value="Bookmarks">
               Bookmarks
             </ion-segment-button>
@@ -80,11 +108,11 @@
             </ion-segment-button>
           </ion-segment>
 
-          <ion-segment id="dynamicAttrElem" color="secondary" value="active">
+          <ion-segment name="dynamicAttrElem" color="secondary" value="active">
             <ion-segment-button value="active">
               Active
             </ion-segment-button>
-            <ion-segment-button id="dynamicAttrDisable" value="disabled" disabled="true">
+            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
               Disabled
             </ion-segment-button>
             <ion-segment-button value="inactive" disabled="false">
@@ -104,26 +132,32 @@
         </div>
 
         <script>
-          var dynamicAttrDisable = document.getElementById('dynamicAttrDisable');
-          var dynamicPropDisable = document.getElementById('dynamicPropDisable');
+          var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
+          var dynamicPropDisable = document.getElementsByName('dynamicPropDisable');
 
           function toggleDisabled() {
-            const attrIsDisabled = dynamicAttrDisable.getAttribute('disabled') === 'true' ? false : true;
-            const propIsDisabled = dynamicPropDisable.disabled === true ? false : true;
-            dynamicAttrDisable.setAttribute('disabled', attrIsDisabled);
-            dynamicPropDisable.disabled = propIsDisabled;
+            for (var i = 0; i < dynamicAttrDisable.length; i++) {
+              const attrIsDisabled = dynamicAttrDisable[i].getAttribute('disabled') === 'true' ? false : true;
+              dynamicAttrDisable[i].setAttribute('disabled', attrIsDisabled);
+            }
+            for (var i = 0; i < dynamicPropDisable.length; i++) {
+              const propIsDisabled = dynamicPropDisable[i].disabled === true ? false : true;
+              dynamicPropDisable[i].disabled = propIsDisabled;
+            }
           }
 
           function toggleValue() {
-            var dynamicAttrElem = document.getElementById('dynamicAttrElem');
-            var dynamicAttrValue = dynamicAttrElem.getAttribute('value');
+            var dynamicAttrElem = document.getElementsByName('dynamicAttrElem');
+            for (var i = 0; i < dynamicAttrElem.length; i++) {
+              var dynamicAttrValue = dynamicAttrElem[i].getAttribute('value');
 
-            if (dynamicAttrValue === 'active') {
-              dynamicAttrElem.setAttribute('value', 'inactive');
-            } else if (dynamicAttrValue === 'inactive') {
-              dynamicAttrElem.setAttribute('value', 'disabled');
-            } else {
-              dynamicAttrElem.setAttribute('value', 'active');
+              if (dynamicAttrValue === 'active') {
+                dynamicAttrElem[i].setAttribute('value', 'inactive');
+              } else if (dynamicAttrValue === 'inactive') {
+                dynamicAttrElem[i].setAttribute('value', 'disabled');
+              } else {
+                dynamicAttrElem[i].setAttribute('value', 'active');
+              }
             }
           }