Badge: Text + Icon 

<span class="kx-badge kx-inline-flex kx-align-items-center">
    <span class="kx-badge__fill kx-inline-flex kx-align-items-center">
    <i class="kx-icon kx-icon--size-base kx-badge__icon">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#arrow-up"></use>
        </svg>
    </i>
        <span class="kx-badge__txt">Badge</span></span>
</span>
 
<span class="kx-badge kx-inline-flex kx-align-items-center">
    <span class="kx-badge__fill{% if skin %} kx-badge--skin-{{ skin }}{% endif %} kx-inline-flex kx-align-items-center">
    {% if icon.symbol -%}
        {% render '@icon', icon, true %}
        <span class="kx-badge__txt{% if hideTxt %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- else -%}
        <span class="kx-badge__txt">{{ text }}</span>
    {% endif -%}
    </span>
</span>
 
{
  "icon": {
    "symbol": "arrow-up",
    "size": "base",
    "classes": [
      "kx-badge__icon"
    ]
  },
  "skin": null,
  "text": "Badge"
}

There are no notes for this item.