Materialize: Change floating action button design / image

Question

I'm trying to add a Whatsapp icon to the floating action button to my webpage, but I'm only able to use the icons of materialize, is there any way to change the image/design of the button for a custom round png image?

Thanks in advance!

Pablo

Answer 1

Very simple. Replace the i tag with an img:

<a class="btn-floating btn-large red">
    <img src="https://via.placeholder.com/56" alt="Button Image">
</a>

This will cover the entire FAB - I'm using a placeholder the exact same dimenions of the button (56px by 56px). If you want to reduce the image to the size of the default icon, have it circular ect, it's:

a.btn-floating img {
  padding: 12px;
  border-radius: 50%;
  width:100%;
}

Codepen.