<div class="flex items-center flex-wrap gap-2">
<button class="btn btn-blue">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="20" height="20" class="mr-2 fill-current">
<path fill-rule="evenodd" d="M12 2.25a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V3a.75.75 0 0 1 .75-.75Zm-9 13.5a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
</svg>
Hero icons
</button>
<button class="btn btn-green">
<svg class="mr-2 fill-current" height="20" width="20" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z"/>
<path d="M10 15l5-6h-4V1H9v8H5l5 6z"/>
</svg>
Custom icons
</button>
<button class="btn btn-gray">
<svg class="mr-2 fill-current" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" >
<path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"></path>
</svg>
Custom Icons
</button>
</div>def icon_button(self, **kwargs):
template = Template(
"""
{% load heroicons %}
{% load svg %}
<div class="flex items-center flex-wrap gap-2">
<button class="btn btn-blue">
{% heroicon_solid "arrow-down-tray" size=20 class="mr-2 fill-current" %}
Hero icons
</button>
<button class="btn btn-green">
{% svg 'custom/download' class="mr-2 fill-current" height="20" width="20" %}
Custom icons
</button>
<button class="btn btn-gray">
{% svg 'custom/delete' class="mr-2 fill-current" height="20" width="20" %}
Custom Icons
</button>
</div>
""",
)
return template.render(Context({}))