cssionic-framework

ionic 6 - create circle ion-button with icon

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

For example:

enter image description here

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.

Solution

  • 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>