Why is my floating action button not displaying its image properly?
<p><a href="http://i.stack.imgur.com/w3uGs.png" rel="noreferrer">This is what my floating action button is showing</a></p>

<p>rather that just showing the actual circle part of the image, it tries to fit the background of my .png file into the floating action button.</p>

<p>here is my xml code:</p>

<pre><code>&lt;android.support.design.widget.FloatingActionButton
    android:id="@+id/addToKitchenButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_gravity="bottom|end"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:src="@drawable/fab_icon"
    /&gt;
</code></pre>

<p><a href="https://lh6.ggpht.com/_KamEKPaB68jAwDVn1JZ5fJ7zmqV6nBygKAxY-lqRhW4q6pQ9iwL7v3Cu0aF9tBQCQsn=h900" rel="noreferrer">how do I get it to look like this?</a></p>

<p>I've given my .png file a transparent background already, so I don't know what else  I need to do. Please Help.</p>

<p>Thank You.</p>