Search code examples
htmlcssmaterial-icons

CSS, HTML: rounded corners Hamburger Menu icon using material-icons class

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

current icon with not rounded corners

and this is what I need to have:

desired icon with round corners

The code I have at the moment looks like this: <i class="material-icons">menu</i>

Thanks

Solution

  • 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.