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

Question

Google Material Icons 在图标字体系列中有不同的变体:Rounded、Sharp、TwoTone 等。

UX 团队正在使用一些图标，并对它们进行一些自定义，稍微加粗或稍作修饰。

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

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

引用带有内容代码和类名的 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:填充、锐利、双色调、轮廓，可以轻松完成。

引用:

• 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

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，请自动生成它或使用 SASS 等 CSS 预处理器。

已更新

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

你可以做几件事:

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

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