title: Vaadin 10 Grid add custom image icon
body: <p>I am using a Vaadin 10 (Flow) <code>Grid</code> to stream data to new rows, and I am trying to add a custom image icon to my <code>TemplateRenderer</code>. </p>
  
  <p>I have a <code>TemplateRenderer</code> setup like this:</p>
  
  <pre><code>TemplateRenderer&lt;TradeUni&gt; sizee = TemplateRenderer.&lt;TradeUni&gt;
              of("&lt;div class$=\"[[item.class]]\"&gt;[[item.size]]&lt;/div&gt;")
              .withProperty("class", cssClassProvider)
              .withProperty("size", TradeUni::getSize);
  </code></pre>
  
  <p>Which displays my numbers correctly in the grid cell like this:</p>
  
  <p><a href="https://i.stack.imgur.com/75xZ1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/75xZ1.png" alt="enter image description here"></a></p>
  
  <p>I would like to have my image rendered inside the same cell, to the left of the numbers. </p>
  
  <p>This was my (very crude) attempt to import it using html:</p>
  
  <pre><code>TemplateRenderer&lt;TradeUni&gt; sizee = TemplateRenderer.&lt;TradeUni&gt;
              of("&lt;div class$=\"[[item.class]]\"&gt;&lt;img src=\"i.imgur.com/3LQBglR.png\"&gt;[[item.size]]&lt;/div&gt;")
              .withProperty("class", cssClassProvider)
              .withProperty("size", TradeUni::getSize);
  </code></pre>
  
  <p>Which give's me this:</p>
  
  <p><a href="https://i.stack.imgur.com/X4zoa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X4zoa.png" alt="enter image description here"></a></p>
  
  <p>I think that I might have to wrap the image and numbers into a <code>HorizontalLayout</code> with the image being a separate component - I think I could handle that, but I am unsure of how to do the actual rendering of the image.  I can probably accomplish it simply with the internal Vaadin Icons set, but I need to use my own little images.. all icons that I am going to use will be at or less than 25 x 25px.  </p>
  
  <p>Thank you so much in advance! </p>