Increase icon size when inside of a segment button

[brandyscarney]

Do not increase segment height. Ours:

iOS:

[brandyscarney]

The following CSS seems to do it, need to make sure there are no side effects:

.segment-button ion-icon {
  font-size: 2.2rem;
}

.segment-button {
  max-height: 2.4rem;
}

[manucorporat]

@brandyscarney I am working in the button flex issues in iOS/safari and I have a question: why some of max-height, min-height properties are relative?
like:

.segment-button {
  max-height: 2.4rem;
}

?

From my understanding... it does not make sense to have a segment or button with a relative height. If you want to use bigger buttons, there is a "larger-button" class, and of course if there is a strange use case where a bigger segment is required, the developer can write their custom CSS.

I think we could reduce the scope of CSS problems in buttons by "hardcoding" some of the margin/padding/height values. what do you think? does it make sense?

[adamdbradley]

Well it's the hardcoding that often gets us into troubles, because users want to change the default to what looks good for their app. So using relative units allows things to adjust when they make changes.

[brandyscarney]

Increased icon size for iOS and md. This will probably need to be revisited if people put an icon and text in the button, since those will be different sizes.

http://ionic-snapshot-go.appspot.com/ionic2/snapshots/pr4/r8z/chrome_400x800#f5e5e433