angular - icon - Ionic2/3: el ícono del botón del encabezado tiene un tamaño diferente que el botón de retroceso automático

ionicons bootstrap

Question

Estoy usando el botón automático 2/3 de Ionic cuando uso NavController.

En una de las páginas quiero agregar el botón al encabezado, que cambiará algo, así que lo he agregado:

<ion-header>
  <ion-navbar color="orange">
    <ion-title>Test</ion-title>
    <ion-buttons end>
      <button ion-button icon-right clear (click)="openModal()">
        Next <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Desafortunadamente, el tamaño del ícono es ligeramente diferente (más pequeño) que el Iónico. Sé que puedo diseñarlo con CSS, pero me da miedo romper algo (no puedo probar todos los dispositivos).

Captura de pantalla (tanto Android como iOS):

¿Tal vez debería usar diferentes clases de botones o componentes? ¿Cómo puedo hacer que el tamaño de todos los botones e íconos en el encabezado sea el mismo?

Answer 1

Agregue una clase de next-button a su icono.

<ion-icon name="arrow-forward" class="next-button"></ion-icon>

Consulte el código fuente iónico para obtener las reglas CSS exactas para el botón Atrás . A continuación, agregue sus estilos personalizados en consecuencia.

ion-icon.next-button.icon-ios {
    min-width: 18px;
    font-size: 3.4rem;
    padding-left: inherit;
    text-align: right;    
    display: inline-block;
}

ion-icon.next-button.icon-md {  
    margin: 0;
    padding: 0 6px;
    text-align: right;   
    font-size: 2.4rem;
    font-weight: normal;
}

Answer 2

Puede usar la directiva de solo icono y eso es todo. De esta manera es el botón de retroceso.

<ion-buttons end>
   <button ion-button icon-right icon-only clear (click)="openModal()">
      Next <ion-icon name="arrow-forward"></ion-icon>
   </button>
</ion-buttons>

Answer 3

Solo necesita aumentar el font-size de font-size del icon como se muestra a continuación.

Nota: Por lo tanto, estás haciendo esto dentro del archivo scss tu página, no romperá ningún otro estilo predeterminado.

your-page.scss

.icon[name="arrow-forward"] {
        font-size: 2.4rem;; //same size of the default back button
    }

Resultado: