<!-- Material Icon -->
<div class="icon">
<i class="material-icons icon__mat-icon">add_location</i>
</div>
<!-- Material Icon In Black -->
<div class="icon" style="--icon-color: var(--color-black)">
<i class="material-icons icon__mat-icon">add_location</i>
</div>
<!-- Material Icon In Orange -->
<div class="icon" style="--icon-color: var(--color-orange)">
<i class="material-icons icon__mat-icon">add_location</i>
</div>
<!-- Overlaid Text -->
<div class="icon">
<span class="icon__overlaid-text">CSV</span>
</div>
<!-- Material Icon -->
<div class="icon">
{% if overlaid_text %}
<span class="icon__overlaid-text">{{ overlaid_text }}</span>
{% else %}
<i class="material-icons icon__mat-icon">{{ icon_name }}</i>
{% endif %}
</div>
<!-- Material Icon In Black -->
<div class="icon" style="--icon-color: var(--color-black)">
{% if overlaid_text %}
<span class="icon__overlaid-text">{{ overlaid_text }}</span>
{% else %}
<i class="material-icons icon__mat-icon">{{ icon_name }}</i>
{% endif %}
</div>
<!-- Material Icon In Orange -->
<div class="icon" style="--icon-color: var(--color-orange)">
{% if overlaid_text %}
<span class="icon__overlaid-text">{{ overlaid_text }}</span>
{% else %}
<i class="material-icons icon__mat-icon">{{ icon_name }}</i>
{% endif %}
</div>
<!-- Overlaid Text -->
<div class="icon">
{% if overlaid_text %}
<span class="icon__overlaid-text">{{ overlaid_text }}</span>
{% else %}
<i class="material-icons icon__mat-icon">{{ icon_name }}</i>
{% endif %}
</div>
/* Material Icon */
{
"icon_name": "add_location",
"label": "Includes recipient locations"
}
/* Material Icon In Black */
{
"icon_name": "add_location",
"label": "Includes recipient locations"
}
/* Material Icon In Orange */
{
"icon_name": "add_location",
"label": "Includes recipient locations"
}
/* Overlaid Text */
{
"overlaid_text": "CSV",
"label": "CSV files"
}
.icon {
--icon-color: var(--color-teal);
display: inline-block;
$icon-size: 24px;
&__overlaid-text {
font-size: $icon-size / 2;
font-weight: 700;
color: $white;
background: var(--icon-color);
justify-content: center;
padding: 2px;
border-radius: 2px;
min-width: 4rem;
vertical-align: middle;
}
&__mat-icon {
font-size: $icon-size;
vertical-align: bottom;
}
&__mat-icon {
color: var(--icon-color);
}
}
Shows