将谷歌材料图标替换为您自己的图标，保持相同的内容代码还是创建新的？

Question

Google Material Icons有不同的图标字体族：圆形、锐利、双色等等。

UX团队正在对一些图标进行定制，稍微加粗或者做些小的调整。

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

2. 此外，是否可以创建新的内容代码？比如说，我创建了公司的Logo。我能为它分配一个内容代码吗？

关于Material icons的内容代码和类名的参考信息

.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 Material：Filled、Sharp、Two Tone、Outlined，可以很容易地完成。

参考资料：

• 如何使用 Google Material 图标设置 CSS 内容属性？
• Material Design Icons - Codepoints

可能的解决方案链接

• 如何使用 Material Icons
• 自定义 SVG 图标 Angular Material

- jerrythomas38

---

我需要问UX团队，他们正在某个Adobe程序中编辑图标，我该如何保留相同的Unicode？我认为Google材料自托管只是指向文件夹中的SVG图像。 - jerrythomas38

个人而言，我建议不要修改第三方代码。这会使未来的迁移变得非常痛苦，并且会混淆所有权。你可以随时导入谷歌图标并在需要时使用它们，也可以导入自己的图标。 - KyleMit

是的，我们通过内容代码或类名来引用所有内容，希望只需更换图像文件即可轻松保留所有前端HTML/CSS代码。 - jerrythomas38

谷歌将它们的图标发布为字体和单独的SVG文件。你当前的代码表明你正在使用字体（font-family: Material Icons）。 - KyleMit

如果你正在分解一些谷歌的东西，一些自定义的东西（特别是你的品牌标志），那么在它还很新鲜的时候就声明性地完成这个过程，长期来看将会减少很多维护工作。在最初进行查找和替换所有实例也不应该太困难。 - KyleMit

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团队询问）。

这样可以用所需的图标替换选择的所有Material Icons内容。

如果发现所替换的内容太多而难以管理自定义CSS，则可以自动生成它或使用CSS预处理器如SASS。

更新：

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

你可以做一些事情：

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

我强烈建议采用第二种选项。也许可以先礼貌地询问你的UX团队是否能够使用他们已经拥有的编辑软件输出字体文件（ODT、TTF等），而不是SVG清单，这可能已经是一个可用的功能了。点击不同的位置可能会给你所需的结果，然后你只需要添加一些CSS。

- Stephan Samuel