how to get select icon inline with ion icon

Question

I have an icon inside of a button tag. I also have a select drop down and I want to place its arrow icon directly inline with the heart icon. I thought I could do this with regular css positioning, but unless I remove the select icon from inside the button tag altogether, the icon won't move the way I need it to with standard css positioning.

        <button class="toolbarButtons" ion-button >

                <ion-select id="select">
                  <ion-option value="NY">New York</ion-option>
                  <ion-option value="BO">Boston</ion-option>
                 </ion-select>

              <ion-icon name="heart">Change City</ion-icon>
     </button>

Answer 1

You'll have more control of Ion Icons if you use the class version. That way you can change it however you like.

Example:

    <tag class="ion-heart"> text </tag>

You can use this class to customize sizing, or create your own custom one.

For display a heart with an arrow inline, you can look at this website and see if it's of any use to you. http://blog.fontawesome.io/2014/05/19/stacking-text-and-icons/ It's using a different icon font, but it should help.