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>