How to get rid of padding or background on custom Slider thumb image?

Question

I am implementing Material3 Slider in Compose with custom thumb image:

Slider(
   modifier = Modifier.semantics { contentDescription = "Localized Description" },
   value = sliderPosition,
   onValueChange = { sliderPosition = it },
   valueRange = 0f..5f,
   steps = 4,
   onValueChangeFinished = {},
   thumb = {
      Image(painterResource(id = R.drawable.custom_icon),"contentDescription")
   }
)

The custom_icon looks like this:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="20dp"
    android:viewportWidth="40"
    android:viewportHeight="20">
  <path
      android:pathData="M10,0.5L30,0.5A9.5,9.5 0,0 1,39.5 10L39.5,10A9.5,9.5 0,0 1,30 19.5L10,19.5A9.5,9.5 0,0 1,0.5 10L0.5,10A9.5,9.5 0,0 1,10 0.5z"
      android:fillColor="#ffffff"/>
  <path
      android:strokeWidth="1"
      android:pathData="M10,0.5L30,0.5A9.5,9.5 0,0 1,39.5 10L39.5,10A9.5,9.5 0,0 1,30 19.5L10,19.5A9.5,9.5 0,0 1,0.5 10L0.5,10A9.5,9.5 0,0 1,10 0.5z"
      android:fillColor="#00000000"
      android:strokeColor="#9E9FA0"/>
</vector>

On screen it looks like this:

Why is there a white background and padding? And how do I get rid of it? I tried setting padding, background, size in Modifier of Image and contentScale of Image. But neither of those had any effect on it.