Fijn

Button component: Icon Left 

<button type="button" class="btn btn-primary -icon -iconLeft">

    <i class="icon-arrow-left"></i>
    Button

</button>
 
<button type="button"{% if disabled %} disabled{% endif %} class="btn{% if color %} btn-{{color}}{% endif %}{% if small %} btn-sm{% endif %}{% if block %} btn-block{% endif %}{% if border and not valid and not invalid %} btn-outline-dark{% elif invalid %} btn-outline-danger{% elif valid %} btn-outline-success{% else %}{% if color == "" %} btn-primary{% endif %}{% endif %}{% if icon %} -icon{% endif %}{% if placement == "left" %} -iconLeft{% else %} -iconRight{% endif %}{% if thin %} -thin{% endif %}{% if extraClass %}{{extraClass}}{% endif %}{% if full_width %} w-100{% endif %}" {% if invalid or valid or tooltip %}data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class='{% if valid %}valid-feedback{% endif %}{% if invalid %}invalid-feedback{% endif %}{% if tooltip_message %} d-inline-block{% endif %}'>{% if show_feedback %}{{tooltip_message}}{% endif %}</div>" data-placement="bottom"{% endif %}>
    {% if placement == "left" %}
        {% if icon %}<i class="icon-{{icon}}"></i>{% endif %}
        {{text}}
    {% else %}
        {{text}}
        {% if icon %}<i class="icon-{{icon}}"></i>{% endif %}
    {% endif %}
</button>
 
{
  "text": "Button",
  "icon": "arrow-left",
  "placement": "left",
  "border": false,
  "block": false,
  "small": false,
  "full_width": false,
  "thin": false,
  "invalid": false,
  "valid": false,
  "tooltip_message": "Error message",
  "show_feedback": false,
  "disabled": false,
  "color": "",
  "extraClass": "",
  "tooltip": false,
  "tooltip_html": "",
  "tooltip_trigger": "",
  "trigger": "hover",
  "popover_content": false
}

Default button zal nog aangepast worden (in afwachting van user tests resultaten)