Can you add images or icons to the Item Template?

[craigmday]

Hi,

Is it possible to add images or icons to an Item Template? There is an existing post for this, but the solution did not appear to work and there was no further feedback.
#59

Can anyone confirm if they have gotten this to work and how it was accomplished? Ideally, I would like to be able to add an edit icon like the "Pencil" icon in PowerApps.

[brendanerofeev]

I use an image icon for a button Here is my code.

<button class="action-openrecord" style="min-width: 45px; min-height: 45px; border-style:none; background-color:#ffffff00; background-size:contain; background-image: url('data:image/png;base64,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');"> </button>

Which produces

[craigmday]

Hi Brendan,

Thank you very much for the quick reply. I tried using your sample, but unfortunately I still don't see an image. This is the full ItemTemplate code that I am using:

"
<div 
Style = '
min-width: 32px;
min-height:64px;
align-items: left;
background-size: contain;
justify-content: center;
font-size: 10px;
font-weight: 600;
padding-left: 10px;
color: RGBA(0,0,0,.90);
{{#if TaskDispatched}} 
background-color: RGBA(0,100,0,0.18);
{{else}}
background-color: RGBA(245,217,39,0.8);
{{/if}}
{{#if TaskSnoozed}} 
background-color: RGBA(155,65,197,0.29);
{{/if}}
'>
{{#if TaskDispatched}}** DISPATCHED ** <br>{{/if}}
{{#if TaskSnoozed}}** SNOOZED ** <br>{{/if}}
{{JobDescription}}<br>
{{dyn365bc_description}}<br>Est. Hours: {{dyn365bc_estimatedhours}}
<br>{{JobType}}</br>
<button class='action-edit' style='min-width: 45px; min-height: 45px; border-style:none; background-color:#ffffff00; background-size:contain; background-image: url('data:image/png;base64,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');'></button>
</div>
"

And the result looks like the attached image.

Also, I'm curious how you were able to use double quotes around your button controls because I found I had to use single quotes, since I had double quotes around the entire ItemTemplate code. Would you mind sharing a screenshot of how this button code looks embedded with your other ItemTemplate code?

Thanks again,
Craig

[craigmday]

UPDATE: I got this working by using double sets of double quotes within the template definition. Thank you very much, Brendan!