Skip to content

bug: Wrong icon position on item input floating labels. #24852

@infacto

Description

@infacto

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x

Current Behavior

The icon is not centered when using floating labels. It looks ugly.

demo

Demo on CodePen (latest Ionic CDN)

Expected Behavior

Centered icon.

Steps to Reproduce

<ion-item>
  <ion-icon slot="start" name="bug"></ion-icon>
  <ion-label position="floating">Name</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>

Workaround:

ion-icon {
  align-self: center;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions