Google Icons字符引用失效、按钮内图标非正方形问题咨询

• 首先确认编码格式书写正确：你使用的&#xxxx;格式仅对十进制编码生效，如果拿的是官方给出的十六进制Code Point，需要在编码前加x标识，正确格式为&#x[十六进制编码];。例如add图标的十六进制Code Point为e145，正确写法是；如果要使用十进制格式，需要先将十六进制编码转为十进制后再填写，不需要加x。
• 其次确认承载字符的元素添加了material-icons类名，只有该类对应的字体规则生效时，字符才会被渲染为图标，否则会显示为乱码或空白。
• 排查编码是否正确，需使用官方图标详情页标注的专属Code Point，不要使用第三方来源的错误编码。

该问题是浏览器默认样式与图标字体的基线对齐规则共同导致的，仅设置line-height:1无法覆盖全部影响因素，按以下步骤调整即可解决：

1. 重置button默认样式：所有主流浏览器都会给button元素默认添加上下不等的内边距与默认行高，这是按钮高度超出预期的核心原因，需显式设置padding保持上下边距一致。
2. 调整图标对齐规则：行内元素默认按文本基线对齐，Material Icons作为图标字体，其基线与普通文本存在差异，会导致图标下方留白更多，给.material-icons元素添加vertical-align: middle即可解决上下空白不均问题。
3. 若需要严格正方形按钮，直接通过弹性布局实现固定宽高+内容居中即可，无需依赖内容自动撑开尺寸。

修正后的完整代码示例：

button {
  /* 重置默认样式 */
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  line-height: 1;
  /* 固定为正方形，可根据需求调整尺寸 */
  width: 40px;
  height: 40px;
  /* 内容居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.material-icons {
  font-size: 24px;
  vertical-align: middle;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
</head>
<body>
    <button type="button">
        <span class="material-icons">add</span>
    </button>
</body>
</html>

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