Material Design 风格图标如何基于文本节点子节点答案

【问题标题】：How does material design style icons based on text node childrenMaterial Design 风格图标如何基于文本节点子节点
【发布时间】：2020-03-07 12:56:30
【问题描述】：

基于下面的代码 sn-p (and found here)，材质库根据 mwc-icon 的文本内容对组件进行样式设置。在查看找到here 的mwc-icon 的源代码后，似乎没有任何javascript 逻辑直接进行样式设置。不知何故，这似乎发生在 css 或字体定义本身中。

图标是如何应用/呈现来代替文本的？

<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

<mwc-icon>shopping_cart</mwc-icon>

<script type="module">
  import '@material/mwc-icon';
</script>

【问题讨论】：

标签： material-design native-web-component

【解决方案1】：

您的问题的答案是文件中设置的 font-family 属性。您已导入 Material Icons 字体并使用它。您输入的图标名称是在其中定义的。代替字符定义，图标名称被定义并映射到相应的 svg 或 png 图像。参考here

【讨论】：

字体系列能否将多个字符转换为一个字形？它是如何工作的？
我不擅长那个。但是在谷歌做到了之后。看来我们可以定义多个字符但没有空格。
谢谢！你为我指出了正确的方向来研究它