ionic 6 - create circle ion-button with icon

Question

How can I create circle ion-button with ionic icon in it (based on angular)?

For example:

Starting point of code:

<ion-button (click)="buttonClicked()">
      <ion-icon name="send-sharp"></ion-icon>
</ion-button>

I tried these solutions but it didn't help.

Answer 1

This how it can be done in the ionic way:

ion-button[shape=circle] {
    --border-radius: 50%;
    width: 56px;
    height: 56px;
}

<ion-button shape="circle" (click)="buttonClicked()">
  <ion-icon slot="icon-only" name="send-sharp"></ion-icon>
</ion-button>

Answer 2

If just the round shape is the need, you can also use

  <ion-fab-button color="danger" size="small"  (click)="onButtonClick()">
      <ion-icon name="send-sharp"></ion-icon>
  </ion-fab-button>