Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Phase out icon font and use SVG everywhere

See original GitHub issue

In https://github.com/wagtail/wagtail/pull/4821 the menu font icons are replaced with SVG icons. It is a nice start. In this issue an overview of work to be done to have SVG icons everywhere.

We choose to switch to SVG icons for accessibility (title attr and aria labels). But SVG icons are also easier to maintain, customise and extend. All icons are all-ready converted to SVG. We need to dorp the icon font reference (CSS) and use the SVG icon like this:

{% load wagtailadmin_tags %}
{% icon name="rocket" classname="..." title="Launch" %}

The intention is to drop Wagtail font icon and CSS from future Wagtail releases. We need to decide what is needed for a proper deprecation process.

Priority

Images in rich text have oversized image icon (SVG regression) #6142
Menu icon positioning https://github.com/wagtail/wagtail/issues/6297 Will be solved by switching to SVG.

Icon font usage that needs to be refactored

Header icons <h1 class="icon icon-image">Images</h1> https://github.com/wagtail/wagtail/pull/6121
Messages framework messages messages success https://github.com/wagtail/wagtail/pull/6124
Button plus button bicolor icon icon-plus #6151
Dropdown buttons dropdown-toggle icon icon-arrow-down #6151
More buttons o-icon c-dropdown__toggle [ icon icon-arrow-down #6151
Wagtail user bar and menu items wagtail-icon wagtail-icon-wagtail https://github.com/wagtail/wagtail/pull/6125
MenuItems (including ModelAdminMenuItem and GroupMenuItem) #6402
Help text help-block help-critical @Scotchester #6457
Breadcrumb (home icon) #6438 @allcaps
Pagination, previous and next chevrons @Scotchester #6573
SearchAreas API @thibaudcolas #6493
Settings menu item @thibaudcolas #6649
All choosers .page-chooser .unchosen:before @Stormheg
StreamField buttons #7565
Spinner @stevedya
Error messages (cross)
ModelAdmin ButtonHelper
- Implementation idea: Add icon property to ButtonHelper that, if present, will output the SVG in the ModelAdmin button template.
ModelAdmin PageChoiceField hierarchy arrows
- Implementation idea: Replace hard-coded icon font span with imported SVG icon.
page_listing_buttons, Add child page
- Implementation idea: Looks like this will require adding an icon property to the Button widget that, if present, will output the SVG in the rendered HTML.
Listings’ up and down ordering arrows
- wagtailadmin_tags.py#L419
- documents/list.html
- wagtailsearchpromotions/list.html
- wagtailredirects/list.html
- tables/column_header.html
- users/list.html
- includes/result_list.html
Login page user and password field icons
add_subpage.html Add subpage icons
history.html Edit this page link icon
Page reordering icon-grip for drag indicator
Page listings “Explore subpage” icons
- _navigation_choose.html
- _navigation_explore.html
- _navigation_move.html
_page_title_explore.html Sites menu icon
workflows/index.html add
workflows/select_task_type.html add
workflows/task_index.html add
workflows/includes/workflow_pages_formset.html add
workflows/task_chooser/includes/select_task_type.html add
modeladmin/inspect.html Back button @vossisboss
wagtailredirects/index.html Header icon
documents/_file_field.html, images/_file_field.html source document/image link icons
wagtailimages/multiple/add.html add
wagtailusers/users/create.html “Go to next tab”

Will be fixed as part of slim sidebar rework

Hamburger menu @allcaps Should this be a button? Currently a div.
Search submit button @allcaps
Main nav #footer. arrow down, account, logout
Main nav menuitem, sub-menu item

Will be fixed as part of the page editor 2022 project

Inputs .url_field .input:before
[] Datetimepicker icons https://github.com/wagtail/wagtail/blob/main/client/scss/overrides/_vendor.datetimepicker.scss
[] edit panels .title-wrapper:before Fish finger icons https://github.com/wagtail/wagtail/blob/main/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss
Preview button icon
Privacy switch button icons
Privacy switch panel icons
_locked_indicator.html locked icon
Dropdown button down arrow (_button_with_dropdown.html, locale_selector.html)

Additional icon font work

Add utility CSS to make sizing and positioning easy for third party and custom works. https://github.com/wagtail/wagtail/issues/6142#issuecomment-643596671 – #6189
Sprite view + IE11 support, and cache ~~https://github.com/wagtail/wagtail/pull/6231~~ https://github.com/wagtail/wagtail/pull/6243
Fix icon size in style guide #6189
class_name or classname. https://github.com/wagtail/wagtail/pull/6125#discussion_r439176243
Update wagtailfontawesome to use SVG OR provide a new drop-in replacement package. I created a replacement package https://pypi.org/project/wagtail-font-awesome-svg/0.0.2/

Code cleanup

Remove mixin https://github.com/wagtail/wagtail/blob/main/client/scss/tools/_mixins.general.scss#L88
Remove variables https://github.com/wagtail/wagtail/blob/main/client/scss/settings/_variables.scss#L131
Remove unused code https://github.com/wagtail/wagtail/blob/main/client/scss/components/_chooser.scss#L36-L39

Documentation

Add documentation https://github.com/wagtail/wagtail/pull/6028
Update the documentation on icon usage https://docs.wagtail.io/en/stable/advanced_topics/customisation/extending_draftail.html?highlight=icon#extending-the-draftail-editor

Deprecation process

Two-release deprecation process if at all possible.
- Remove any FontAwesome specific workaround (fa-).
- Remove wagtail icon font (we need it for backward compatibility. So deprecate and remove at major release).
- Remove choosers styles referring to icon-font.

I’d propose to keep this issue as a meta issue to keep track of progress. Work can be done in separate issues and pull requests. To keep pull requests reviewable.