scottdurow / power-drag-drop

MIT License
132 stars 29 forks source link

How to use icons in item template #59

Open tbsfnk opened 10 months ago

tbsfnk commented 10 months ago

Hi,

how can I use icons in the itemtemplate as shown in the demo? I've tried to use an img tag with base64 data:

<div
    style='
        background-color: RGBA(255, 187, 44, 0.63);
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
        display:flex;
        flex-direction: column;
        place-items: center;
        margin: 10px;
        padding: 5px;
        border-radius: 5px;
    '>
    <div><b>{{Title}}</b></div>
    <div>{{CustomerName}}</div>
    <div>{{ExecutionDate}}</div>
    <table style='width: 100px;'>
        <tr>
            <td><button class='action-edit'><img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0yODAtMTIwcS0zMyAwLTU2LjUtMjMuNVQyMDAtMjAwdi01MjBoLTQwdi04MGgyMDB2LTQwaDI0MHY0MGgyMDB2ODBoLTQwdjUyMHEwIDMzLTIzLjUgNTYuNVQ2ODAtMTIwSDI4MFptNDAwLTYwMEgyODB2NTIwaDQwMHYtNTIwWk0zNjAtMjgwaDgwdi0zNjBoLTgwdjM2MFptMTYwIDBoODB2LTM2MGgtODB2MzYwWk0yODAtNzIwdjUyMC01MjBaIi8+PC9zdmc+' /></buttom></td>
            <td><button class='action-delete'><img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0yMDAtMjAwaDU3bDM5MS0zOTEtNTctNTctMzkxIDM5MXY1N1ptLTgwIDgwdi0xNzBsNTI4LTUyN3ExMi0xMSAyNi41LTE3dDMwLjUtNnExNiAwIDMxIDZ0MjYgMThsNTUgNTZxMTIgMTEgMTcuNSAyNnQ1LjUgMzBxMCAxNi01LjUgMzAuNVQ4MTctNjQ3TDI5MC0xMjBIMTIwWm02NDAtNTg0LTU2LTU2IDU2IDU2Wm0tMTQxIDg1LTI4LTI5IDU3IDU3LTI5LTI4WiIvPjwvc3ZnPg==' /></buttom></td>
        </tr>
    </table>    
</div>

Thank you Beste reagrds Tobias

kborkowski commented 10 months ago

Check your closing tag and change the "m" to "n", it should help. /buttom -> /button

tbsfnk commented 10 months ago

Hi @kborkowski, thank you for your reply. I've changed the tag, but the icon is still not showing... Do you have any other idea?

Thank you Best regards Tobias