Django templates

1. Install with python -m pip install iconic[django].

2. Add to your INSTALLED_APPS:

   INSTALLED_APPS = [
       ...,
       'iconic',
       ...,
   ]

Now in your templates you can load the template library with:

{% load iconic %}

This provides a tag to render <svg> icons: iconic_icon. The tags take these arguments:

• name, positional: the name of the icon to use. You can see the icon names on the iconic.app grid.

• size, keyword: an integer that will be used for the width and height attributes of the output <svg> tag. Defaults to the icons’ designed size: 24.

• Any number of keyword arguments. These will be added as HTML attributes to the output <svg> tag. Underscores in attribute names will be replaced with dashes, allowing you to define e.g. data- attributes.

For example, to render an outline “announcement” icon, at 48x48, with some extra CSS classes and a data attribute “controller”, you would write:

{% iconic_icon "announcement" size=48 class="h-4 w-4 inline" data_controller="academia" %}

Jinja templates

1. Install with python -m pip install iconic[jinja].

2. Adjust your Jinja Environment to add the global function iconic, imported from iconic.jinja. For example:

   from iconic.jinja import iconic_icon
   from jinja2 import Environment
   
   env = Environment()
   env.globals.update(
       {
           "iconic_icon": iconic_icon,
       }
   )

Now in your templates you can call those two functions, which render <svg> icons corresponding to the two icon styles in the set. The functions take these arguments:

• name, positional: the name of the icon to use. You can see the icon names on the iconic.app grid.

• size, keyword: an integer that will be used for the width and height attributes of the output <svg> tag. Defaults to the icons’ designed size: 24.

• Any number of keyword arguments. These will be added as HTML attributes to the output <svg> tag. Underscores in attribute names will be replaced with dashes, allowing you to define e.g. data- attributes.

For example, to render an outline “announcement” icon, at 48x48, with some extra CSS classes and a data attribute “controller”, you would write:

{% iconic("announcement", size=48, class="h-4 w-4 inline", data_controller="academia") %}