Is it possible to add hero icons with to css in a rich text element

[KPT]

I’ve been playing around with “Progress bar batch css” over here.

I’m still adjusting the design but I would really like to get a hero icon into my design.
To replace the icon.

I have the following css in a template column

<div class="progress-card">
    <div class="progress-card-badge"></div>
    <div class="progress-card-data">
<!------------------------------- ↓Text data to replace↓ --->
        <div class="tab">
            <div class="tabText">TOTAL</div>
        </div>
        <div class="totalContainer">
            <div class="flexItem">
                <h3 class="header_totals divider">£ 3.45</h3>
                <p class="sub_header">Total</p>
            </div>
                <div class="line"></div>
            <div class="flexItem">
                <h3 class="header_totals">12h 34min</h3>
                <p class="sub_header">Total Time</p>
            </div>
        </div>
        <p class="progress-card-description">Some message</p>
        </div>
    </div>
</div>
<div class="footer-container">
    <div class="footer-item footer-icon"></div>
    <div class="footer-item footer-text">1 filter</div>  
</div>  



<style>

:root {
    --progCardBadge: url(__ICON);
    /*--progressCardBackground: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);*/
    --progressCardBackground: red;
    --progressFooterBackground: white;


}


.totalContainer{
    /*border: 1px solid red;*/
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
   
}

.flexItem {
    /*border: 1px solid blue;*/
    box-sizing: border-box;
    height: 80px;
    width: calc(50%);
    /*margin: 1em;*/
}

.header_totals {
    text-align: center;
    color: white;
    
}

.divider {
    border-right: 2px solid salmon;
}

.sub_header {
    text-align: center;
    font-size: 14px !important;
    line-height: 1.2 !important;
    opacity: .4;

}

.tab {
    width: 80px;
    height: 22px;
    border-radius: 50px;
    margin-bottom: 20px;
    background-color: black;
}

.tabText {
   color: white;
   font-size: x-small;
   text-align: center;
   font-weight: 800;
   margin-top: 1px;
}


.progress-card {
    padding: 15px;
    background: var(--progressCardBackground);
    /*border-radius: 10px;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    gap: 1px;
    align-items: center;
}

.footer-container {
    padding: 10px 15px 10px 15px;
    background: var(--progressFooterBackground);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    gap: 1px;
    align-items: center;
}

.footer-item {
    /*border: 1px solid blue;*/
    box-sizing: border-box;
    height: 20px;
}

.footer-text {
    width: 100%;
    font-size: 14px;
    color: grey;
    font-weight: 800;
    
}

.footer-icon {
    flex: none;
    width: 20px;
    height: 20px;
    background: var(--progCardBadge) center/cover;
}


.progress-card-data {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.progress-card-title {
    margin-bottom: 4px !important;
}

.progress-card-description {
    font-size: 14px !important;
    line-height: 1.2 !important;
    opacity: .4;
}

</style>

I’m trying to add the icon here:
–progCardBadge: url(__ICON);

where __ICON is a replacement for a heroicon column.
But it does not work. I’ve tried a few other things but still the same.

However I’m pretty new to CSS so I’m also pretty sure that I might be going around this the complete wrong way.

[Joe_Gabriele]

Just add a hero icon in a column, then use Single Value and direct it to that icon. Then use the Single Value to replace the __ICON in a Temp column. Ive had them work in my HTML Rich Text

Cant tell you if youre CSS is correct, but the above will get you your hero icon in the __ICON

[KPT]

I don’t understand why I need the single value column. I tried it but still nothing showing.

I have the following setup

I’m fairly sure It’s me who don’t know how to add the icon to the CSS despite trying google and stack overflow

[Joe_Gabriele]

Try

<pre><span><style>

instead of just <style>

[KPT]

still the same same…

[KPT]

Figured it out.
It was basically me who didn’t know how to add an image in html.