将Google材料图标替换为自己的图标，保留相同的内容代码或创建新的图标

Question

Google Material Icons在Icon字体系列中有不同的变体：Rounded，Sharp，TwoTone等。

UX团队正在获取一些图标，并对其进行自定义，稍加粗或小的修饰。

1. 是否可以替换/编辑图标，并保持相同的内容代码而没有任何问题？示例：我们正在使用Visual Studio .Net Core应用程序，并将Material图标放置在我们的库中。

2. 此外，是否可以创建新的内容代码？说，我创建公司徽标。我可以为其分配内容代码吗？

使用内容代码和类名称引用材料图标

.carouselrightarrow {
    font-family: Material Icons;
    font-size: 36px;
    position: absolute;
    top: 16px;
    content: "\e409";
}

<button id="add-to-favorites"
        class="mdc-icon-button">
    <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
    <i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>

现在，当前正在替换圆形图标库。除了节省编码时间/现有代码库之外，执行此操作的另一个原因；如果客户想换成Google素材：实心，鲜明，两个音调，轮廓，可以轻松完成。

参考文献：

• 如何使用Google Material Icon设置CSS content属性？
• 物料设计图标-代码点

可能的解决方案链接

• 如何使用材质图标
• 自定义SVG图标角材料

Answer 1

最好的办法是覆盖 CSS。

（这并不难。CSS 中的 C 是“级联”，这意味着使用后面的内容而不是前面的内容。这是压倒一切的。）

创建一个 CSS 文件：

.material-icons.mdc-icon-button__icon--companylogo {
  font-family: "Font From UX Team";
  /* whatever other styling you need, like sizes */
  content: \0000;
}
.material-icons.mdc-icon-button__icon--on {
  font-family: "Font From UX Team";
  /* whatever other styling you need, like sizes */
  content: \0000;
}

确保您的 UX 团队的字体文件包含在此之前的某个位置。还要确保该文件是在其他 CSS（Material Icons 目前正在使用的 CSS）之后加载的。将指令替换content为与您想要的图标匹配的字符代码（询问 UX 团队）。

这应该会将您选择的所有材质图标内容替换为您想要的内容。

如果您发现他们要替换的内容太多而无法管理自定义 CSS，请自动生成它或使用 SASS 等 CSS 预处理器。

更新

您似乎正在混合 SVG 和字体项目，使用 Google 的字体和您团队的 SVG。这让事情变得复杂了。SVG 本质上是 HTML，而您使用的实体（图标）的定义纯粹是 CSS。问题的出现是因为 CSS 期望 HTML 已经存在。

您可以做一些事情：

1. 使用所有 SVG。这意味着不使用 Material Icons 中的字体文件，而是包含它们的 SVG。鉴于您可能正在某个为您做出最初决定的框架内工作，这可能会非常困难。无论哪种方式，从 HTML 列表大小以及页面加载时间的角度来看，成本都会很高。
2. 将您团队的 SVG 组装到字体文件中。这需要在后端进行最多的工作，但会产生最优雅的解决方案。您的用户体验团队可能知道如何做到这一点，或者他们可能愿意学习，从而为您省去麻烦。在您的构建过程中也可能有一种完全自动化的方法来执行此操作（VS，对吧？），这可能会为您省去麻烦。
3. 仅包含您要替换和添加的项目的 SVG。您可以选择将它们包含在每个页面上（HTML 或 CSS 膨胀），或者以某种方式找出需要它们的位置并有选择地包含它们（代码复杂性）。

我强烈推荐中间选项（#2）。也许首先要好好询问您的 UX 团队是否能够使用他们已有的编辑软件来输出字体文件（ODT、TTF 等）而不是 SVG 列表，这可能已经是可用的功能。单击不同的位置可能会得到您需要的结果，然后您只需添加一些 CSS 即可。