I have this input of image type that inside has an svg icon. I want the input to be round and fit the icon inside.

This is my HTML:

<div class="card-buttons">
   <input type="image" class="editButton" src="../../assets/images/edit.svg" (click)="enableEditing(i)" />
   <input type="image" class="deleteButton" src="../../assets/images/trash.svg" (click)="deleteTask(i)" />
</div>

This is my css:

.card-buttons input{
  width: 24px;
  font-family: 'Lexend Era';
  border: 2px solid $primary;
  border-radius: 50%;
  cursor: pointer;
  color: white;
}

.card-buttons .editButton{
  background-color: $my-blue;
}

And this is the result that I’m getting:

I don’t know why the icon from .editButton is overflowing the edges. Should I change the input to an specific svg tag?