<div class="icon">
<span class="icon__overlaid-text">CSV</span>
</div>
<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>
{
"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