Get MDI (materialized design icons) image in JavaScript

Question

The application I want to modify uses Polymer framework and has the following html code:

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

the application also uses modified version of mdi (materialized design icons). Therefore, the function getWeatherIcon returns the text:

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

which is then automatically replaced with corresponding icon symbol by the browser. Instead of having browser to substitute teхt returned by getWeatherIcon with mdi icon, I want to get an image for each item.condition (text) in javascript code of my page. Something like:

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);
}

My idea is to use toDataURL() and exploit hidden canvas for this. However, I am not sure it is a right approach.