如何调整样式实现label内mat-icon图标与相邻文本的对齐

错位问题本质 #

• mat-icon 是 Angular Material 组件库默认按24px尺寸设计的inline-flex元素，自带的垂直对齐逻辑是基于自身原始高度匹配文本基线
• 仅通过 transform: scale(0.5) 缩放图标，只会改变视觉渲染尺寸，不会调整元素在文档流中占据的原始空间，也不会同步更新缩放后的对齐参考线，最终就会出现图标和相邻文本错位、两侧边距不均的问题

可直接落地的样式调整 #

直接替换原有CSS代码即可实现精准对齐，无需调整原有HTML结构：

label {
    font-size: 0.6rem;
    font-family: Verdana, sans-serif;
    border-radius: 15px;
    padding: 5px;
    font-weight: bold;
    background-color: red;
    color: black;
    text-transform: uppercase;
    /* 新增flex对齐规则 */
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

mat-icon {
    transform: scale(0.5);
    /* 修正缩放后的占位偏移 */
    align-self: center;
    margin: 0 -4px;
}

方案说明 #

• 不建议仅靠vertical-align属性调整错位：由于transform: scale不会改变元素盒模型的占位大小，单独设置垂直对齐需要反复手动微调偏移值，可维护性很差
• 如果需要保留非flex的布局写法，可给mat-icon设置vertical-align: middle，再通过position: relative微调上下偏移量，但这种方式适配不同字号场景的成本远高于flex居中方案

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