如何无需额外标签实现按钮内Material图标与文本的间距设置

无需额外添加标签即可实现需求，以下是两种常用可行方案：

方案1：边距过滤方案（兼容性最佳） #

核心思路是先给所有图标统一设置左右间距，再单独移除图标靠近按钮边缘一侧的多余间距，可完美适配所有场景：

/* 给所有按钮内的Material图标默认设置左右间距 */
.btn .material-icons-outlined {
  margin: 0 20px;
}
/* 图标位于按钮最左侧时，移除左侧多余边距 */
.btn .material-icons-outlined:first-child {
  margin-left: 0;
}
/* 图标位于按钮最右侧时，移除右侧多余边距 */
.btn .material-icons-outlined:last-child {
  margin-right: 0;
}

该方案可以覆盖所有你提到的场景：

• 按钮内只有纯文本：无匹配元素，不产生任何多余间距
• 图标在文本左侧：仅保留图标右侧20px间距，刚好在图标与文本之间生成间隔
• 图标在文本右侧：仅保留图标左侧20px间距，刚好在文本与图标之间生成间隔
• 按钮内仅放图标：同时匹配:first-child和:last-child规则，左右边距全部清空，无多余间距

方案2：精准匹配方案（适合复杂场景） #

如果你的业务场景需要兼容按钮内有多个元素的复杂情况，可以使用现代CSS选择器做更精准的判断，目前主流浏览器均已支持对应属性：

/* 图标后方存在非图标内容时，添加右侧间距 */
.btn .material-icons-outlined:not(:last-child) {
  margin-right: 20px;
}
/* 图标前方存在其他内容时，添加左侧间距 */
.btn .material-icons-outlined:not(:first-child) {
  margin-left: 20px;
}

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