MaterializeCSS Using Icon As FAB Button [FeatureDiscovery]

On the FeatureDiscovery page they have a FAB button in the bottom right hand corner (http://materializecss.com/feature-discovery.html). I would like to replace this button with a .png image - a circular image like this: https://s-media-cache-ak0.pinimg.com/originals/3b/44/d4/3b44d4a91a8cd625984fb30451cf6686.png. Is this possible at all?

If so would you be able to guide me into how to do it please?

Thanks.

Solution

I made this fiddle for you. Do you mean something like this?

#icon {
  z-index: 10;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  bottom: 5%;
  right: 5%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;
}

.fab-img {
  width: 100%;
  height: 80px;
}

<div id="icon">
  <div id="wrapper">
    <img class="fab-img" src="https://s-media-cache-ak0.pinimg.com/originals/3b/44/d4/3b44d4a91a8cd625984fb30451cf6686.png"/>
  </div>
</div>

You can also replace the <i class="material-icons">menu</i> with the img tag included in the snippet