{% extends 'base.html' %} {% from 'bootstrap4/utils.html' import render_icon %} {% block content %}

SVG icon

{% raw %}{{ render_icon('heart') }}{% endraw %}
Output: {{ render_icon('heart') }}

SVG icon with custom size

{% raw %}{{ render_icon('heart', 32) }}{% endraw %}
Output: {{ render_icon('heart', 32) }}

SVG icon with custom size and Bootstrap color

{% raw %}{{ render_icon('heart', 25, 'primary') }}{% endraw %}
Output: {{ render_icon('heart', 25, 'primary') }}

SVG icon with custom size and custom color

{% raw %}{{ render_icon('heart', '2em', 'red') }}{% endraw %}
Output: {{ render_icon('heart', '2em', 'red') }}

SVG icon with title and descr

{% raw %}{{ render_icon('heart', title='Heart', desc='A heart.') }}{% endraw %}
Output: {{ render_icon('heart', title='Heart', desc='A heart.') }}

SVG icon with additional classes for styling

{% raw %}{{ render_icon('heart', '2em', classes='text-success bg-light p-2 rounded-lg') }}{% endraw %}
Output: {{ render_icon('heart', '4em', classes='text-success bg-light p-2 rounded-lg') }}

Buttons with SVG icon

Download {{ render_icon('arrow-down-circle') }} Bookmark {{ render_icon('bookmark-star') }}

Font icon with custom size and Bootstrap color

{% raw %}{{ render_icon('heart', '25px', 'primary', font=True) }}{% endraw %}
Output: {{ render_icon('heart', '25px', 'primary', font=True) }}

Font icon with custom size and custom color

{% raw %}{{ render_icon('heart', '2em', 'red', font=True) }}{% endraw %}
Output: {{ render_icon('heart', '2em', 'red', font=True) }}

Buttons with font icon

Download {{ render_icon('arrow-down-circle', font=True) }} Bookmark {{ render_icon('bookmark-star', font=True) }} {% endblock %}