如何修改Material Icon图标形状？无需新增系统字体

以下是几种无需引入新字体即可实现方形警示图标的方案：

方案1：CSS容器添加方形边框 #

通过给图标外层套一个容器，用CSS绘制方形边框，保留原warning图标核心样式：

/* 容器样式：控制方形边框尺寸、颜色 */
.square-warning-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; /* 匹配Material Icons默认尺寸 */
  height: 24px;
  border: 2px solid currentColor; /* 继承图标颜色，保持风格统一 */
  border-radius: 4px; /* 可根据需求调整圆角大小 */
}

/* 调整内部图标尺寸，避免超出边框 */
.square-warning-wrapper .material-icons-outlined {
  font-size: 18px;
}

HTML使用示例：

<div class="square-warning-wrapper">
  <span class="material-icons-outlined">warning</span>
</div>

方案2：编辑SVG图标添加方形轮廓 #

如果使用的是SVG格式的Material Icon，直接修改SVG代码，添加方形边框元素：

1. 导出Material Icons的warning SVG源码
2. 在原有图标路径前添加方形边框的<rect>元素：

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <!-- 方形边框：可调整x/y/width/height控制位置和大小 -->
  <rect x="6" y="6" width="36" height="36" fill="none" stroke="currentColor" stroke-width="2" rx="2"/>
  <!-- 原warning图标路径 -->
  <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm0-22v8h-4v-8h4zm0 12v-4h-4v4h4z"/>
</svg>

方案3：CSS伪元素模拟边框 #

利用伪元素在图标上层绘制方形边框，无需额外容器：

.material-icons-outlined.warning-square {
  position: relative;
}

.material-icons-outlined.warning-square::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid currentColor;
  border-radius: 3px;
  pointer-events: none; /* 不影响图标点击交互 */
}

HTML使用示例：

<span class="material-icons-outlined warning-square">warning</span>

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