如何在Polymer 2中正确导入Material Design Iconic Font？

你遇到的这个情况其实是Polymer 2的特性导致的——Polymer 2已经废弃了type="css"的HTML导入方式，这种写法在Polymer 1里能正常工作，但到了2.x版本就不再支持了，这就是你导入CSS后只显示方块而非图标的核心原因。

下面给你几个可行的解决办法：

方法1：用Polymer的custom-style引入CSS #

Polymer 2推荐使用自定义样式块来导入外部CSS，具体步骤如下：

1. 在你的主HTML文件或者组件文件中，添加custom-style标签：

<custom-style>
  <style>
    @import url('./styles/css/material-design-iconic-font.min.css');
  </style>
</custom-style>

2. 重点检查字体文件路径：CSS里的@font-face引用的字体文件（比如.woff、.ttf格式），其相对路径是相对于CSS文件本身的，不是你的HTML文件。如果路径错误，浏览器找不到字体文件，自然只会显示方块。

方法2：在组件内部直接导入CSS #

如果只是在单个Polymer组件中使用这些图标，可以直接在组件的style标签里导入CSS：

<dom-module id="your-custom-component">
  <template>
    <style>
      @import url('../styles/css/material-design-iconic-font.min.css');
      /* 这里可以添加组件的其他自定义样式 */
    </style>
    <!-- 示例：使用Material Design Iconic Font图标 -->
    <i class="zmdi zmdi-home"></i>
  </template>
  <script>
    class YourCustomComponent extends Polymer.Element {
      static get is() { return 'your-custom-component'; }
    }
    customElements.define(YourCustomComponent.is, YourCustomComponent);
  </script>
</dom-module>

方法3：排查字体文件加载问题 #

有时候即使CSS导入正确，字体文件加载失败也会导致图标显示异常，你可以通过浏览器开发者工具排查：

• 按下F12打开开发者工具，切换到Network标签页；
• 刷新页面，查看字体文件的请求状态：
  • 如果显示404错误，说明字体文件路径有误，调整CSS里的@font-face路径，或者把字体文件移动到正确的目录；
  • 如果是跨域错误，需要配置服务器允许字体文件的跨域访问（比如设置CORS响应头）。

最后提一句：Polymer 2已经是比较老旧的版本了，如果后续有项目迭代计划，可以考虑迁移到Polymer 3或者Lit框架，不过先把当前的图标问题解决才是重点~

内容的提问来源于stack exchange，提问作者Luis Roberto