Ionic 4 round icon only button outside of toolbar/ion-buttons

Question

How do I create a circular, clear, icon-only button outside of ion-buttons? I want to have a button with the style you get, when you use and icon-only button inside ion-buttons (e.g. clear and circular). My code so far:

    <ion-button icon-only shape="round" color="white" fill="clear">
        <ion-icon slot="icon-only" name="close"></ion-icon>
    </ion-button>

The resulting button isn't circular though, it's just a rectangular button with rounded corners.

The ionic 4 documentation doesn't mention how to do it.

Answer 1

The FabButton will work... but here is how i did it in an reactjs app using ionic components, just use the angular versions and you should get the same results

<IonCard>
  <IonToolbar>
    <IonTitle>Test</IonTitle>
    <IonButtons slot="end">
      <IonButton
        style={{
          backgroundColor: "red",
          borderRadius: "100%",
          color: "white",
          width: 32
        }}
      >
        <IonIcon icon={close}></IonIcon>
      </IonButton>
    </IonButtons>
  </IonToolbar>
  <IonCardContent>
    This is some text that is the content of the card with the close
    button below
  </IonCardContent>
</IonCard>