在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]; }

，然后浏览器会自动将其替换为相应的图标符号。 我不想让浏览器将getWeatherIcon返回的teхt替换为mdi图标，而是要为页面的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（）并为此使用隐藏的画布。但是，我不确定这是正确的方法。