Cannot set button-icon size in ion-header-bar

ionic-v1
1

See the codepen: http://codepen.io/anon/pen/rhJAg

The main code here is:

<ion-header-bar class="bar bar-subheader bar-positive item-input-inset">
    <!-- <div class="item-input-wrapper"> -->
    <i class="icon ion-iphone placeholder-icon"></i>
    <input type="text" ng-model="to">
    <button class="button button-small button-clear" ng-show="to.length"><i class="icon ion-android-close">clear</i></button>
    <!-- </div> -->
  </ion-header-bar>

I have added the atri “button-small” to the button, but the icon shown is still big. And if I uncomment the “div” part, when the button is shown, the whole input element changes its height. I think it is a bug.

2

I also tested it on my device.
The input element just covers and makes the bottom border of the positive header bar invisible.

While if the “div” in the code is uncommented, it shows well. But if I type something and make the button visible, the input element covers and makes the bottom border of the positive header bar invisible, again.

Somebody please help me how to do this right.

3

The is the expected behavior. When buttons are in a header-bar, they have some default style that overrides button-small I would add some custom class that come after ionics css.

.button-custom,
.button-custom .icon:before{
  font-size: 14px;
}
4

.button-custom,
.button-custom .icon:before{
font-size: 14px !important;
}

credit mhartington