Mat-icon导出Excel/CSV时显示图标名而非图标如何解决？

项目表格里用mat-icon（或者i标签加material-icons类）渲染图标，调用matTableExporter导出Excel/CSV的时候，图标没法正常导出，单元格里只会显示图标对应的文本（比如向上箭头就显示arrow_upward）。

• 网页端显示正常：对应位置渲染绿色向上箭头图标
• 导出后显示异常：单元格仅保留arrow_upward纯文本

复现代码 #

图标实现代码 #

两种写法都存在该问题：

<!-- 第一种写法 -->
<i class="material-icons col-green">arrow_upward</i>

<!-- 尝试过的第二种写法 -->
<mat-icon class="col-green">arrow_upward</mat-icon>

导出逻辑代码 #

exportTable(fileType = "xlsx") {
    this.matTableExporter.exportTable(fileType, { fileName: this.tabData.title, sheet: this.tabData.title });
}

这个问题和图标写法没关系，核心是matTableExporter默认只会提取DOM单元格内的纯文本内容作为导出值，它识别不了字体文件渲染出来的图标，所以会直接把标签包裹的图标连字文本导出去。
另外要注意：Excel和CSV本身不支持嵌入网页端的字体图标，没法做到导出后和网页上显示的material图标完全一致，最通用的方案是替换成Excel能识别的Unicode符号。

选其中一种即可：

• 方法1：导出时做值映射
  直接在导出配置里加mapper，对图标列的内容做替换，把图标对应的文本转成通用箭头符号，不用改页面模板：

  exportTable(fileType = "xlsx") {
    this.matTableExporter.exportTable(fileType, { 
      fileName: this.tabData.title, 
      sheet: this.tabData.title,
      mapper: (rowData) => {
        // 把下面的trend换成你自己表格里图标列的字段名
        switch(rowData.trend) {
          case 'arrow_upward':
            rowData.trend = '↑';
            break;
          case 'arrow_downward':
            rowData.trend = '↓';
            break;
          // 其他图标可按需求自行增加映射规则
        }
        return rowData;
      }
    });
  }
  

• 方法2：模板里预置导出文本
  给图标标签加aria-hidden="true"属性，让导出工具跳过这个标签的文本，再在旁边加一个页面隐藏、导出时能被识别的文本节点，放需要导出的符号，不用改导出逻辑：

  <span class="icon-cell">
    <!-- 页面上隐藏，导出时会被识别 -->
    <span style="display: none">↑</span>
    <mat-icon class="col-green" aria-hidden="true">arrow_upward</mat-icon>
  </span>
  

内容的提问来源于stack exchange，提问作者Bhautik Khunt