diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss
index b30e38034b7..d629b2f2560 100644
--- a/core/src/components/segment-button/segment-button.ios.vars.scss
+++ b/core/src/components/segment-button/segment-button.ios.vars.scss
@@ -52,7 +52,7 @@ $segment-button-ios-border-radius:                    4px !default;
 $segment-button-ios-border-color:                     ion-color(primary, base) !default;
 
 /// @prop - Size of an icon in the segment button
-$segment-button-ios-icon-size:                        26px !default;
+$segment-button-ios-icon-size:                        24px !default;
 
 /// @prop - Line height of an icon in the segment button
 $segment-button-ios-icon-line-height:                 28px !default;
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index d7c3d164cc8..443b62bbed9 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.scss
@@ -42,6 +42,8 @@
   --padding-top: 0;
   --padding-bottom: 0;
 
+  display: flex;
+
   flex: 1 0 auto;
   flex-direction: column;
 
@@ -86,15 +88,16 @@
   position: relative;
 
   flex-direction: inherit;
+
+  flex-grow: 1;
   align-items: center;
   justify-content: center;
 
   width: 100%;
-
   min-width: inherit;
   max-width: inherit;
-  height: auto;
 
+  height: auto;
   min-height: inherit;
   max-height: inherit;
 
@@ -192,17 +195,17 @@
 // --------------------------------------------------
 
 // Layout: icon start
-:host(.segment-button-layout-icon-start) {
+:host(.segment-button-layout-icon-start) .button-native {
   flex-direction: row;
 }
 
 // Layout: icon end
-:host(.segment-button-layout-icon-end) {
+:host(.segment-button-layout-icon-end) .button-native {
   flex-direction: row-reverse;
 }
 
 // Layout: icon bottom
-:host(.segment-button-layout-icon-bottom) {
+:host(.segment-button-layout-icon-bottom) .button-native {
   flex-direction: column-reverse;
 }
 
diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.scss
index 71317335e38..6db23a25f80 100644
--- a/core/src/components/segment/segment.scss
+++ b/core/src/components/segment/segment.scss
@@ -12,7 +12,7 @@
 
   display: flex;
 
-  align-items: center;
+  align-items: stretch;
   justify-content: center;
 
   width: 100%;
diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
index 369a90895c7..b3bdfe210da 100644
--- a/core/src/components/segment/test/basic/index.html
+++ b/core/src/components/segment/test/basic/index.html
@@ -110,6 +110,21 @@
           </ion-segment-button>
         </ion-segment>
 
+        <ion-segment>
+          <ion-segment-button value="330">
+            <ion-label>330ml</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="440">
+            <ion-label>440ml</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="500">
+            <ion-label>500ml</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="custom">
+            <ion-icon name="create"></ion-icon>
+          </ion-segment-button>
+    </ion-segment>  
+    
         <ion-segment name="dynamicPropDisable" disabled color="danger">
           <ion-segment-button value="Bookmarks">
             <ion-label>Bookmarks</ion-label>
diff --git a/core/src/components/segment/test/standalone/index.html b/core/src/components/segment/test/standalone/index.html
index e31bd1ff6ee..cf8a9a307fe 100644
--- a/core/src/components/segment/test/standalone/index.html
+++ b/core/src/components/segment/test/standalone/index.html
@@ -90,6 +90,33 @@
       <ion-icon name="logo-slack"></ion-icon>
     </ion-segment-button>
   </ion-segment>
+
+  <ion-segment value="2" class="custom-indicator">
+    <ion-segment-button value="1">
+      <ion-icon name="home"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button class="large-icon" value="2">
+      <ion-icon name="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="3">
+      <ion-icon name="person"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <ion-segment value="2" class="custom-indicator">
+    <ion-segment-button layout="icon-start" value="1">
+      <ion-icon name="home"></ion-icon>
+      <ion-label>Home</ion-label>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-start" class="large-icon" value="2">
+      <ion-icon name="call"></ion-icon>
+      <ion-label>Call</ion-label>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-start" value="3">
+      <ion-icon name="person"></ion-icon>
+      <ion-label>Person</ion-label>
+    </ion-segment-button>
+  </ion-segment>
 </body>
 
 <script>
@@ -180,10 +207,14 @@
     --color-checked: #3aaf85;
   }
 
-  .custom-icon ion-icon {
-    font-size: 44px;
+  .custom-indicator {
+    --indicator-color: lightgray;
   }
 
+  .custom-icon ion-icon,
+  .large-icon ion-icon {
+    font-size: 44px;
+  }
 </style>
 
 </html>