Fab button fica metade por baixo do header

Do jeito que está, o fab button fica por baixo do header da aplicação, eu fui na documentação do ionic e aparentemente o fab button de lá também está com o mesmo problema quando se escreve assim:

<ion-header>
  <ion-navbar>
    <ion-title>Carro Selecionado</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

//-----------(Resto do código)------------

  <ion-fab top right edge>
    <button ion-fab>
      <ion-icon name="arrow-dropright"></ion-icon>
    </button>
  </ion-fab>

</ion-content>

Eu tentei jogar ele pra dentro do ion-header trocando o top por bottom e aparentemente funcionou para o Android, mas no iOS ele some com a linha que define a separação do header com o content.

Então eu decidi ir por um outro caminho, usando um botão diferente dentro do header:

<ion-header>

  <ion-navbar>
    <ion-title>Carro Selecionado</ion-title>

    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="arrow-round-forward"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>
<ion-content padding>

//-----------(Resto do código)------------

</ion-content>

Esse botão tira a necessidade de um Fab entre o header e o content, além de ser uma aproximação mais comum do ponto de vista do app. Apesar de que pra mim não ficou com aquele feel agradável e o maníaco por UX dentro de mim ta gritando dizendo que isso ta feio e errado com uma seta pra esquerda e a outra pra direita. Mas não liga pra ele.

Eu queria saber como o professor conseguiu fazer com que o Fab-button fique bonitinho entre o header e o content da aplicação. Será que é pq eu estou usando a versão mais nova dentro da versão 3 (A v3.9.2)?