Package: wagtail-icon-chooser
Wagtail Icon ChooserIcon chooser widget for Page/Model fields and Stream FieldInstallationpip install wagtail-icon-chooserAddwagtailiconchooserto your installed appsINSTALLED_APPS = [
        ...
        "wagtailiconchooser",
        ...
        ]UsageUsewagtailiconchooser.widgets.IconChooserWidgetin FieldPanelsUsewagtailiconchooser.blocks.IconChooserBlockin StreamField blocksfromdjango.dbimportmodelsfromwagtail.admin.panelsimportFieldPanelfromwagtail.fieldsimportStreamFieldfromwagtail.modelsimportPagefromwagtailiconchooser.blocksimportIconChooserBlockfromwagtailiconchooser.widgetsimportIconChooserWidgetclassMyPage(Page):icon=models.CharField(max_length=100,null=True,blank=True)stream_field_with_icon=StreamField([('icon',IconChooserBlock()),],use_json_field=True,blank=True,null=True)content_panels=Page.content_panels+[FieldPanel("icon",widget=IconChooserWidget),FieldPanel("stream_field_with_icon"),]ScreenshotsIcon Chooser Widgets for Page field and Stream fieldIcon List ModalShowing icons on your frontend templatesThe Icons can be used out of the box in templates rendered on the Wagtail admin, without any custom configuration.Below are two possible ways of getting your svg icon to show on your custom frontend template:1. Including individual SVG markupYou can use thesvg_icontemplate tag as below:{% load wagtailiconchooser_tags %}

....

{% block content %}<div>{% svg_icon name=page.icon classname="your-custom-class" %}</div>{% endblock content %}

.....2. Using SVG SpritesAdd all icons to your template's context, and have them as a svg sprite. Wagtail provides a way to get all the admin
icons as a svg sprite, using a view found atwagtail.admin.views.home.iconsAdd the svg sprite to your templateuse theicontemplate tag fromwagtailadmin_tagsto render your svg, which will the link with the icon from the
svg spriteor directly render the svg to the templateWe provide custom abstract pageCustomIconPage, that helps you to achieve the above.This just overrides theget_contextmethod of the Wagtail Page class, to add the svg sprite string.fromdjango.dbimportmodelsfromwagtail.admin.panelsimportFieldPanelfromwagtail.modelsimportPagefromwagtailiconchooser.modelsimportCustomIconPagefromwagtailiconchooser.widgetsimportIconChooserWidgetclassMyPage(CustomIconPage,Page):icon=models.CharField(max_length=100,null=True,blank=True)content_panels=Page.content_panels+[FieldPanel("icon",widget=IconChooserWidget)]Your template will now have a svg spritecontextobject, with the keyicons_svg_spriteYou can add the svg sprite anywhere in the template, and use theicontag{% load wagtailadmin_tags %}

....

{% block content %}

{% if icons_svg_sprite %}
{{ icons_svg_sprite|safe }}
{% endif %}<div>{% icon name=page.icon %}</div>{% endblock content %}


.....You can also directly render your icon without using theiconfromwagtailadmin_tagstemplate tag,
sincewagtailadmin_tagsis clearly meant to be used on the admin side of things.Just replace{% icon name=page.icon %}with{{ icons_svg_sprite|safe }}<svgclass="icon"><usehref="#icon-{{ page.icon }}"></use></svg>NOTEThis approach will load all the icons added to Wagtail (using theregister_iconshook) to your template. If you
have registered many SVG icons, this might increase your page's loading bandwidth and might not be efficient since you
might not use all the icons.If you have a list of icons that are known, you can create a svg sprite containing only those icons, by using the
functionget_svg_sprite_for_icons. This can be used in a view. For example:fromdjango.shortcutsimportrenderfromwagtailiconchooser.utilsimportget_svg_sprite_for_iconsdefmy_view(request):icons=["some-icon","some-other-icon",...]svg_sprite=get_svg_sprite_for_icons(icons)context={"svg_sprite":svg_sprite}returnrender(request,"template.html",context=context)In yourtemplate.htmlyou will have access to thesvg_spritecontext, and you can render and use as below:<div>{{ svg_sprite|safe }}</div><svgclass="icon"><usehref="#icon-some-icon"></use></svg><svgclass="icon"><usehref="#icon-some-other-icon"></use></svg>