title: How to add an vector color icon in ExtendedFloatingActionButton
body: <p>I'm trying to add a <strong>color vector</strong> icon in an <strong>ExtendedFloatingActionButton</strong> from <strong>google material</strong> 
  but it is showing a black background in the icon.</p>
  
  <p>On Preview of layout, it looks alright but when run on mobile it shows black background near the icon.</p>
  
  <pre><code> &lt;com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
       android:id="@+id/floating_btn_take_test"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom|center"
       android:layout_marginBottom="@dimen/dimen_20dp"
       android:text="@string/txt_take_test"
       android:textColor="@color/primaryColor"
       app:backgroundTint="@color/color_white"
       app:elevation="@dimen/dimen_10dp"
       app:icon="@drawable/ic_color_icon"
       app:iconTintMode="add"
       app:layout_anchorGravity="bottom|center"
       app:rippleColor="@color/secondaryColor"
       app:shapeAppearanceOverlay="@style/ShapeAppearance_Button" /&gt;
  
  &lt;style name="ShapeAppearance_Button" parent="ShapeAppearance.MaterialComponents.SmallComponent"&gt;
      &lt;item name="cornerFamily"&gt;rounded&lt;/item&gt;
      &lt;item name="cornerSize"&gt;@dimen/dimen_10dp&lt;/item&gt;
      &lt;item name="android:layout_marginBottom"&gt;@dimen/dimen_30dp&lt;/item&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>How to remove the black background around the icon?</p>