如何使用material-icons类为汉堡菜单图标添加圆角？

当然可以实现，你只需要通过自定义CSS添加背景和圆角样式即可，无需修改material-icons类本身。具体操作如下：

• 首先，给图标元素添加一个自定义类（避免影响其他Material Icons的样式）：

<i class="material-icons icon-round-bg">menu</i>

• 然后编写对应的CSS样式，模拟你想要的圆角背景效果：

.icon-round-bg {
  background-color: #f5f5f5; /* 匹配目标截图的浅灰色背景 */
  border-radius: 8px; /* 圆角大小可按需调整 */
  padding: 8px; /* 给背景和图标之间留些空间 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

如果不想额外加类，也可以直接给这个图标设置内联样式（但不推荐，不利于样式复用）：

<i class="material-icons" style="background:#f5f5f5; border-radius:8px; padding:8px; display:inline-flex;">menu</i>

原理很简单：material-icons类仅负责图标的字体渲染，本身不包含背景、圆角这类装饰性样式，所以需要通过自定义CSS补充这些属性来达到你想要的效果。

内容的提问来源于stack exchange，提问作者Harry