title: Get MDI (materialized design icons) image in JavaScript
body: <p>The application I want to modify uses Polymer framework and has the following html code:</p>
  
  <pre><code>&lt;template is="dom-repeat" items="[[forecast]]"&gt;
     &lt;div&gt; &lt;ha-icon icon="[[getWeatherIcon(item.condition)]]"&gt;&lt;/ha-icon&gt; &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>the application also uses modified version of mdi (materialized design icons). Therefore, the function getWeatherIcon returns the text:</p>
  
  <p><code>getWeatherIcon(condition) { return this.weatherIcons[condition]; }</code> </p>
  
  <p>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:</p>
  
  <pre><code>var condIcons = [];  
  for (i = 0; i &lt; data.length; i++) {
    var d = data[i];
    var IconImage = new Image();
    IconImage.src =...
    //IconImage=this.weatherIcons[d.condition];
    condIcons.push(IconImage);
  }
  </code></pre>
  
  <p>My idea is to use toDataURL() and exploit hidden canvas for this. However, I am not sure it is a right approach.</p>