[Ionic v4] (ion-item-option + routerlink) > ion-icon => icon displays too low

[IQbrod]

Ionic info:

   ionic (Ionic CLI)             : 4.8.0
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v8.12.0
   npm    : 6.4.1
   OS     : Linux 4.15

Bug Report

Ionic version:
[x] 4.8.0

Current behavior:
The icon misaligns and is displayed too low when an ion-item-option is used with a routerLink

Expected behavior:
Aligned icons

Steps to reproduce:
1 - Run a sample of code using the related code
2 - Slide the item using the routerLink

Related code:

<ion-content>
  <ion-list no-border #slidingList>

    <ion-list-header>
      TODOLIST
    </ion-list-header>
    
    <ion-item-sliding *ngFor="let tdl of todolists">

      <ion-item [routerLink]="'/list-items/'+ tdl.uuid" routerDirection="forward">
        <ion-label>{{tdl.name}}</ion-label>
        <p item-end>{{tdl.items.length}}</p>
      </ion-item>

      <ion-item-options side="end">
        <ion-item-option color="danger" (click)=delete(tdl.uuid,tdl.name)>
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-item-option>

<-- This item-option does not display its icon the correct way -->
        <ion-item-option [routerLink]="'/editlist/' + tdl.uuid" routerDirection="forward" color="primary" (click)=resetList()>
          <ion-icon slot="icon-only" name="create"></ion-icon>
        </ion-item-option>
<-- -->
      </ion-item-options>
    
    </ion-item-sliding>

  </ion-list>
</ion-content>`

Working solution
Remove "[routerLink]="..." routerDirection="..." corrects the bug

[IQbrod]

The problem comes from the ion-item-option > #shadow-root > a class="button-native"
This class provides padding : 0.7

I tried to add this sample of code in global.css

.button-native {
    padding: 0;
}

But the bug isn't fixed. Any idea how to fix it ?

[brandyscarney]

Thank you for the issue! I was able to reproduce this in the conference app, it looks like the problem is the rendering of an <a> tag instead of a <button> which needs the following styles that the button element is getting:

display: inline-block;
box-sizing: border-box;

The problem is it isn't easy to apply a workaround on this, but I will add this fix in as part of this PR: #17711

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.