{% extends 'lara_django_base/base.html' %} {% load static icons %} {% block head_title %}Icon System Demo{% endblock %} {% block body %}

SVG Icon System Demo

Method 1: Template Tag

{% icon 'home' %} Home (default size)
{% icon 'dashboard' class_name='w-6 h-6 text-blue-600' %} Dashboard (large, blue)
{% icon 'bell' class_name='w-5 h-5 text-yellow-500' title='Notifications' %} Bell with accessibility title
{% verbatim %}{% icon 'home' %}{% endverbatim %}
{% verbatim %}{% icon 'dashboard' class_name='w-6 h-6 text-blue-600' %}{% endverbatim %}

Method 2: Include Template

{% include 'lara_django_base/includes/icon.html' with name='table' %} Table (using include)
{% include 'lara_django_base/includes/icon.html' with name='people-circle' class='w-6 h-6 text-green-600' %} People (large, green)
{% include 'lara_django_base/includes/icon.html' with name='gear-fill' class='w-5 h-5 text-gray-600' title='Settings' %} Settings with title
{% verbatim %}{% include 'lara_django_base/includes/icon.html' with name='table' %}{% endverbatim %}

Available Icons

{% for icon_name in 'menu,dashboard,home,table,people-circle,bell,pen-to-square,grid,collection,calendar3,chat-quote-fill,cpu-fill,gear-fill,tools,chevron-right,geo-fill,mail'|split:',' %}
{% icon icon_name class_name='w-6 h-6 text-gray-700' %} {{ icon_name }}
{% endfor %}

Performance Benefits

❌ Old Method (Inline SVG)

  • • Icons in every HTML response
  • • No browser caching
  • • Larger page size
  • • Harder to maintain
  • • Repeated SVG code

✅ New Method (External Sprite)

  • • Single file cached by browser
  • • Smaller HTML responses
  • • Easy to maintain centrally
  • • Better performance
  • • Consistent icon system
{% endblock %}