用自己的图标替换 Google Material 图标，保持相同的内容代码或创建新的

Posted 2023-02-22

【中文标题】用自己的图标替换 Google Material 图标，保持相同的内容代码或创建新的

【英文标题】：Replace Google Material Icons with Own Icons, Keep Same Content Code or Create New One

【发布时间】：2019-12-01 19:47:28

【问题描述】：

Google Material Icons 在图标字体系列中有不同的变体：圆角、锐利、双色等。

UX 团队正在制作一些图标，并对其进行一些定制，稍微加厚或稍加修饰。

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

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

引用包含内容代码和类名的 Material 图标

.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，可以轻松完成。

参考文献：

How to set the CSS content property with a Google Material Icon? Material Design Icons - Codepoints

可能的解决方案链接

How to Use Material Icons Custom SVG Icons Angular Material

【问题讨论】：

content 属性仅描述要使用的 unicode 字符。当您的团队调整这些图标时，他们是否会修改现有字体文件并上传全新的字体文件。如果他们不重命名任何 unicode 字符，则新字体文件仍应使用相同的字符。我想这是一个更多关于他们使用什么工具来操作字体文件的问题。你知道他们用的是什么工具吗？

我需要询问 UX 团队，他们正在编辑一些 Adob​​e 程序中的图标，我将如何保留相同的 unicode？我认为 Google 材料自托管只是指向文件夹中的 svg 图像

就个人而言，我建议保留第三方代码不变。这让未来的迁移变得非常痛苦，并且混淆了所有权。您可以始终导入 google 图标并在您喜欢的地方使用它们，并在需要的地方也导入您自己的图标。

是的，我们通过内容代码或类名来指代所有内容，希望只换出图像文件会很容易，同时保持我们所有的前端 html/css 代码完整

Google 将他们的图标发布为字体和单独的 SVG。您当前的代码表明您正在使用字体 (font-family: Material Icons)

【参考方案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 现在正在使用的那个。将 content 指令替换为与您想要的图标匹配的字符代码（询问 UX 团队）。

这应该将您选择的所有 Material Icons 内容替换为您想要的内容。

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

更新

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

你可以做一些事情：

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

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