vaadin grid newbie question

Hello everybody,
I'm making use of several vaadin elements for a school project I've been working on.  I'm not totally 100% on all the nitty-gritty specifics concerning how web components work just yet, and I've hit a bit of a wall trying to do something that I feel should be fairly simple.  I have an iron-icon in the cells of one of the columns.  I only want that icon to display for the row that is active/selected, but I'm having issues either accessing the specific element or doing it in some blanket css.  How can I accomplish this?  If I could get the selected row's index I would have no problems, but I hours of googling and reading the docs have not gotten me any closer to that.  I don't really care how I go about it, as long as it works.  What's the proper way to do this?  My grid:

<vaadin-grid id="playlistGrid" items='{{songList}}' active-item="{{activeItem}}">
<vaadin-grid-column>
<template>
<iron-icon id="playIcon[[index]]" class="playIcon" icon="vaadin:play"></iron-icon>
</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Name</template>
<template>[[item.name]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">album</template>
<template>[[item.albumName]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">artist</template>
<template>[[item.artistName]]</template>
</vaadin-grid-column>
</vaadin-grid>

Hi Ian,
If you wan’t the element to be hidden for non-selected items you could bind the template’s instance property “selected” to the element’s “hidden” property as follows:

<iron-icon hidden=“[[!selected]]”>

or if you want to use the grid’s “active item” for example, you can utilize a computed binding as follows (in this snippet the "item" is an internal instance property and "activeItem" is the property you already extracted in your example):

<iron-icon hidden=“[[_isItemHidden(item, activeItem)]]”>

and then implement “_isItemHidden” to return true when the items don’t match.