Remove oblong background from material design icon

HTML & CSS
1

The material design icon I am trying to use seems to come with a stadium background that appears when I hover:

image

I would like to make the stadium background disappear, which I could do by setting the color to be the same as the color of the enclosing widget, but I cannot figure out what to set the color on. At a minimum, I would like for the circular icon to be centered in the stadium, but same issue. I am actually using NiceGUI, but if a CSS expert could provide some guidance, I think I will be able to figure out how to translate it to NiceGUI.

2

Could you explain what that is? I haven’t heard that term before.

It would probably help a lot if you could provide a live demo of this.

2 Likes
3

“Stadium” is a shape. See Wikipedia. It is evident in the image I posted. Just be aware that it appears only when I hover. Otherwise, the icon has no background, like the one on the left.

4

It’s been designed like its a slider/latch.

Agreed with ralph, without seeing it in situ its going to be hard to diagnose.

1 Like