Vaadin-grid. One column content to be one icon, Polymer 3

Hi gurús,

I’m working in a Polymer3 project with vaadin-grid.

For columns what the cell content is text I use the syntaxis in this way shown below in bold and it works fine:

**<vaadin-grid-sort-column path="{{}}" header="{{hdr.header_label)}}"></vaadin-grid-sort-column>**

For the icon I’m trying to use it in this other way:

   				<img id="icon"  height="80" width="100" src="{{row.value}}">                   

The vaadin-grid main tag is in the way of:

**<vaadin-grid id="mygridid" items="{{row}}" on-selected-items-changed="itemSelected" selected-object="{{selectedObject}}"> 			**

Basically I’m running a do-repeat based on the hdr variable value but then for the img I need the value from the row variable or am I missing something obvious and I’m blind?

Thanks in advance

I think we do not yet have Polymer 3 example of this, but if you go to you will find an example of image rendered to a column using iron-image, JavaScript looks like this :

.renderer = function(root, column, rowData) {
  if (!root.firstElementChild) {
	root.innerHTML = '<iron-image width="30" height="30" sizing="cover"></iron-image>';
  root.firstElementChild.alt = + ' ' +;
  root.firstElementChild.src = rowData.item.picture.thumbnail;

The same idea can be applied with iron-icon as well.

If you like to use [Vaadin Icons]
(, it is easy with iron-icon, just install the package

npm i @vaadin/vaadin-icons --save

and refer to them like this

<iron-icon icon="vaadin:vaadin-h"></iron-icon>

Hi Tatu,

Finally I got what is required. The current item is in context through the variable item so I can get it by {{item.my_icon}}

As the dom-repeat was based on the header array variable then I did not link that the {{item.zzz}} was in context in that moment …

Thanks a lot!