Why is the Drawable on the TextInputLayout not clearly visible?

I am trying to add a microphone button to a text field so that users can speak which will be translated to text.
My layout looks as below:

 <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/descriptionLayout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/volunteering_description"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/projectLayout"
        app:endIconMode="custom"
        app:endIconDrawable="@drawable/ic_microphone"
        app:endIconContentDescription="Voice Input"
        android:layout_marginTop="@dimen/default_margin">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etDescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minLines="2" />
    </com.google.android.material.textfield.TextInputLayout>

The icon appears well like black and white when viewed independently, but when added in the TextInputLayout, it gets grayed out and not clearly visible:

I have tried app:boxBackgroundMode="none" which didn't help either.

Does anyone have suggestion how to fix it?

The original icon can be found via this link.

I could not reproduce the issue using your exact code, so there might be something wrong with the drawable you created. Please try to create your drawable like this:

Right-click on the res folder in Android Studio and choose New -> Image Asset

Then, switch to the "Action Bar and Tab Icons" tab on the top:

[

Finally, choose keyboard voice as clipart and click Next -> Create:

Overwrite any current files. Then, the output should look like this: