mat-icon在mat-fab按钮中增大字号后无法居中如何解决

解决方案 #

核心原因是mat-icon默认的宽高、行高都是和默认24px字体大小绑定的，修改字体大小后没有同步调整这三个属性，加上修改后的mat-fab没有设置居中布局，就会出现偏移问题。

可以直接修改CSS规则如下：

.add-picture {
    width: 100px;
    height: 100px;
    /* 新增flex布局实现子元素水平垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 如果不想全局修改所有mat-icon的样式，可把选择器改为 .add-picture .mat-icon 仅作用于当前按钮内的图标 */
.mat-icon {
    font-size: 80px;
    /* 同步修改宽高、行高和字体大小匹配 */
    width: 80px;
    height: 80px;
    line-height: 80px;
}

修改后即可实现图标在自定义尺寸的mat-fab按钮内完全居中。

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