ionic 6 - create circle ion-button with icon

user_3026105 0
Viewed 2868

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.

ionic-framework css
5 Answers

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

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

this is one approach

ion-button#send::part(native) {
  width: 50px;
  height: 50px;
  border-radius: 100% !important;
}

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

You need to adjust ion-button properties, for default size code below do the trick.

ion-button {
 --border-radius: 30px;
}

ion-button.round,
ion-button[size='default'].round {
 --padding-start: 8px;
 --padding-end: 8px;
}

<ion-button class="round">
 <ion-icon slot="icon-only" name="images-outline"></ion-icon>
</ion-button>

If you use small or large icon adjust values.

user_49821690

Try this

HTML

<ion-footer>
<div class="footer_div">
    <ion-input type="text" placeholder="Type a message..">
        <ion-icon name="mic" class="mic"></ion-icon>
        <ion-icon name="add" class="add"></ion-icon>
    </ion-input>
    
    <ion-icon name="send-sharp" class="send_btn"></ion-icon>
    
</div>

SCSS

ion-footer{
.footer_div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 6px;
    // background: #ECE5DD;
}
ion-input{
    // border-radius: 25px;
    // border: 1px solid lightgray;
    --padding-start: 8px;
    --padding-end: 40px;
    // background: white;
    position: relative;

    .mic{
        font-size: 20px;
        padding-left: 10px;
        color: darkgray;
    }

    .add{
        font-size: 20px;
        padding-right: 10px;
        color: darkgray;
        position: absolute;
        right: 0;
    }
}

.send_btn {
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-55%,-45%);
    font-size: 22px;
    color: var(--ion-color-primary);
}
.chat_div{
    border-radius: 50%;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
    height: 35px;
    width: 35px;
    position: relative;
    margin-left: 5px;
    background: var(--ion-color-main);
    ion-icon {
        color: white;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-55%,-45%);
        font-size: 22px;
    }
}

}

user_84441800
Related