======
Icons
======

To improve the modularity of the UI a templatetag should be used to render icons in html.
The templatetag will render a bootstrap 3 compatible glyphicon html tag.

Usage Guide
------------
:func:`megforms.templatetags.megforms_extras.icon` renders icon html:

.. code-block:: python

    In [1]: from megforms.templatetags.megforms_extras import icon
    In [2]: from megforms.constants import ICON_TYPE_EDIT
    In [3]: icon(ICON_TYPE_EDIT)
    Out[3]: '<span class="glyphicon glyphicon-edit"></span>'

Of course this templatetag can be used in html:

.. code-block:: html+django

    {% load megforms_extras %}

    {% icon 'edit' %}

If you need to add extra html attributes to your icon you can use a :func:`megforms.templatetags.megforms_extras.icon_css_class` to generate the css class only:

.. code-block:: html+django

    {% load megforms_extras %}

    <span class="{% icon_css_class 'edit' %}" data-id="123"></span>

Adding new icons
------------------
The templatetags will log an error if you use an icon that isn't defined in :const:`megforms.constants.ICON_TYPES`.
New icons must be added to the icon types list.
When adding the constant for the new icon, please add it in alphabetical order to the list of icons:

.. code-block:: python

    ICON_TYPE_ALERT = "alert"
    ICON_TYPE_ARROW_LEFT = "arrow-left"
    ICON_TYPE_ARROW_RIGHT = "arrow-right"
    ICON_TYPE_BLACKBOARD = "blackboard"
    ICON_TYPE_BOOK = "book"
    ICON_TYPE_BOOKMARK = "bookmark"
    ICON_TYPE_CALENDAR = "calendar"