Bug Report

Ionic Info

@ionic/core@4.0.0-beta.16

Describe the Bug

Following #16182, the ion-label doesn’t align well with an ion-icon inside an ion-item anymore. It becomes very apparent, for example, when using an item within a card-header (see fiddle).

Before (Beta 15)	After (Beta 16)
http://jsfiddle.net/simonhaenisch/7y4tdbvm/	http://jsfiddle.net/simonhaenisch/gwm1t6rb/

I think it might be that it’s supposed to align with the bottom of the icon (which might come from the MD spec?), however it just looks off. Looking at the screenshots in #16182, it also doesn’t seem like it’s supposed to be that way (e. g. single-line item with the bluetooth icon).

Expected Behavior

It should look pretty 🦄

Additional Context

This style rule also breaks chips wrapped within icons because chips contain labels (see https://github.com/ionic-team/ionic/issues/16352#issuecomment-440857500).

Current work-around is to overwrite it in my global stylesheet:

.item .sc-ion-label-md-h {
  margin: 10px 0;
  line-height: 1.2 !important;
}