Material Design风格的图标是如何基于文本节点子节点的

Question

根据下面的代码片段（and found here), the material library is styling the component based on the text content of mwc-icon. After looking at the source code for mwc-icon found here，似乎没有任何 javascript 逻辑直接进行样式设置。不知何故，这似乎发生在 css或者在字体定义本身。

图标是如何 applied/rendered 代替文字的？

<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>

Answer 1

你的问题的答案是文件中设置的字体系列属性。您已经导入并使用了 Material Icons 字体。定义您输入的图标名称的位置。而不是字符定义图标名称被定义并映射到相应的 svg 或 png images.refer here

Material Design风格的图标是如何基于文本节点子节点的

How does material design style icons based on text node children

material-design

native-web-component