{% extends 'base.html' %}
{% from 'bootstrap5/utils.html' import render_icon %}

{% block content %}
    <h2>Icon</h2>
    <pre>{% raw %}{{ render_icon('heart') }}{% endraw %}</pre>
    Output: {{ render_icon('heart') }}
    <h2>Icon with custom size</h2>
    <pre>{% raw %}{{ render_icon('heart', 32) }}{% endraw %}</pre>
    Output: {{ render_icon('heart', 32) }}
    <h2>Icon with custom size and Bootstrap color</h2>
    <pre>{% raw %}{{ render_icon('heart', 25, 'primary') }}{% endraw %}</pre>
    Output: {{ render_icon('heart', 25, 'primary') }}
    <h2>Icon with custom size and custom color</h2>
    <pre>{% raw %}{{ render_icon('heart', '2em', 'red') }}{% endraw %}</pre>
    Output: {{ render_icon('heart', '2em', 'red') }}
    <h2>Icon with title and descr</h2>
    <pre>{% raw %}{{ render_icon('heart', title='Heart', desc='A heart.') }}{% endraw %}</pre>
    Output: {{ render_icon('heart', title='Heart', desc='A heart.') }}
    <h2>Button example</h2>
    <a class="btn btn-primary text-white">Download {{ render_icon('arrow-down-circle') }}</a>
    <a class="btn btn-success text-white">Bookmark {{ render_icon('bookmark-star') }}</a>
{% endblock %}
