javascript - 在 JavaScript 中获取 MDI（物化设计图标）图像

Question

我要修改的应用程序使用 Polymer 框架并具有以下 html 代码：

<template is="dom-repeat" items="[[forecast]]">
   <div> <ha-icon icon="[[getWeatherIcon(item.condition)]]"></ha-icon> </div>
</template>

该应用程序还使用修改版的 mdi（物化设计图标）。因此，函数 getWeatherIcon 返回文本：

getWeatherIcon(condition) { return this.weatherIcons[condition]; }

然后浏览器会自动将其替换为相应的图标符号。我不想让浏览器用 mdi 图标替换 getWeatherIcon 返回的 teхt，而是想在我的页面的 javascript 代码中为每个 item.condition（文本）获取一个图像。就像是：

var condIcons = [];  
for (i = 0; i < data.length; i++) {
  var d = data[i];
  var IconImage = new Image();
  IconImage.src =...
  //IconImage=this.weatherIcons[d.condition];
  condIcons.push(IconImage);
}

我的想法是使用 toDataURL() 并为此利用隐藏的画布。但是，我不确定这是一种正确的方法。

标签： javascripthtmlpolymergoogle-material-icons