如何让Material Symbols check_circle图标hover时仅内部变绿且背景不超圆形

先给出调整后的HTML结构：

<span class="material-symbols-outlined check-circle-icon">check_circle</span>

以下通过CSS分别实现你的三个需求：

1. 鼠标悬停时仅图标内部变为绿色 #

Material Symbols 是字体类图标，check_circle默认是轮廓样式，可通过切换字体变量实现填充效果并变色：

.check-circle-icon {
  /* 默认保持轮廓状态 */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: #000;
  transition: all 0.2s ease;
}

.check-circle-icon:hover {
  /* 悬停时切换为填充样式，同时设置绿色 */
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: #10b981;
}

2. 设置图标背景色为绿色且不超出圆形轮廓 #

利用圆角属性将背景转为圆形，同时用弹性布局让元素尺寸精准贴合图标：

.check-circle-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #10b981;
  color: #fff; /* 图标文字颜色设为白色，保证对比度 */
}

3. 让元素边框匹配图标形状，解决无padding时边框略大的问题 #

默认行内元素的行高会导致边框偏大，通过固定尺寸、盒模型调整解决：

.check-circle-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #10b981;
  line-height: 1; /* 去除默认行高影响 */
  padding: 1px; /* 微调抵消图标偏移 */
  box-sizing: border-box; /* 边框不额外增加元素尺寸 */
}

整合所有需求的完整CSS #

如果要同时实现三个效果，可将样式合并：

.check-circle-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #10b981;
  border: 2px solid #10b981;
  color: #fff;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 1px;
  box-sizing: border-box;
}

.check-circle-icon:hover {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: #10b981;
  background-color: #fff;
}

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