Angular项目自托管Material Icons v4的完整可行操作方案咨询

本方案支持Material Icons全变体（填充、轮廓、圆角、尖锐、双色），适配Angular及所有前端项目，可正常显示所有最新发布的图标，完全适配内网无公网环境。

1. 准备最新官方资源 #

• 在公网环境下导出官方最新发布的Material Icons全变体woff2格式字体文件，以及对应的字体规则，所有资源均为官方原生发布，无第三方修改，可合法自用。
• 完整资源清单包含：填充、轮廓、圆角、尖锐、双色5类变体对应的woff2字体文件，无需引入其他格式字体。

2. 项目静态资源部署 #

• 在项目静态资源目录（Angular项目默认是src/assets）下新建fonts/material-icons目录，将所有下载的woff2字体文件放入该目录。

3. 编写自托管样式文件 #

• 在src/styles目录下新建material-icons-selfhost.css文件，写入以下样式，注意将字体文件路径替换为你项目里的实际路径：

/* 填充类图标（默认常用） */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/fonts/material-icons/material-icons-filled.woff2) format('woff2');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* 轮廓类图标 */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/fonts/material-icons/material-icons-outlined.woff2) format('woff2');
}
.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* 圆角类图标 */
@font-face {
  font-family: 'Material Icons Round';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/fonts/material-icons/material-icons-round.woff2) format('woff2');
}
.material-icons-round {
  font-family: 'Material Icons Round';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* 尖锐类图标 */
@font-face {
  font-family: 'Material Icons Sharp';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/fonts/material-icons/material-icons-sharp.woff2) format('woff2');
}
.material-icons-sharp {
  font-family: 'Material Icons Sharp';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* 双色类图标 */
@font-face {
  font-family: 'Material Icons Two Tone';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/fonts/material-icons/material-icons-two-tone.woff2) format('woff2');
}
.material-icons-two-tone {
  font-family: 'Material Icons Two Tone';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

4. 项目配置引入 #

Angular项目配置 #

• 先卸载旧版长期未更新的npm图标包（如果之前安装过）：npm uninstall @material-design-icons/font @angular/material-icons
• 打开angular.json文件，在projects -> [你的项目名] -> architect -> build -> options -> styles数组中添加刚才写的样式文件路径：

"styles": [
  "src/styles/material-icons-selfhost.css",
  // 保留其他原有样式文件即可
]

• 无需修改原有组件中的图标使用逻辑，之前的<mat-icon>home</mat-icon>或者<span class="material-icons">home</span>写法完全兼容。

普通前端项目配置 #

• 直接在入口html文件的head中引入样式文件即可：<link rel="stylesheet" href="/styles/material-icons-selfhost.css">

5. 验证生效 #

• 使用近两年新发布的图标测试，比如switch_access_shortcut、nest_doorbell等旧版npm包没有的图标，能正常显示即配置成功。

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