如何为Material for MkDocs的社交链接设置自定义图标

问题原因 #

Material主题的extra.social配置里，icon字段默认只会查找内置图标或系统.icons目录下的文件，直接写项目内的文件路径会被当成模板路径解析，所以找不到你存在docs/assets里的图标。

正确配置步骤 #

放弃使用icon字段，改用image字段指定自定义图标的路径（路径相对于docs目录，构建后会自动映射到站点根目录）：

修改mkdocs.yml里的extra.social部分：

extra:
  social:
    - image: assets/twitter.svg
      link: https://x.com/

额外优化（可选） #

如果自定义图标大小和内置图标不一致，可添加自定义CSS调整样式：

1. 在docs/assets/css下创建custom.css文件，内容如下：

.md-social__link img {
  height: 24px;
  width: 24px;
  vertical-align: middle;
}

2. 在mkdocs.yml中引入这个CSS文件：

extra_css:
  - assets/css/custom.css

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