Is it possible to have rounded corners for the menu icon using the material-icons class. This is what I currently have:

and this is what I need to have:

The code I have at the moment looks like this: <i >menu</i>

Thanks

CodePudding user response：

I think because this is an icon you can't change the inner style, I suggest you use SVGs to do what you want and edit as you wish.

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-labelledby="hamburgerIconTitle" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#000"><path d="M6 7h12M6 12h12M6 17h12"/></svg>

Try this one.