Replace admin icons images by inline SVG

[loic84]

Some of the benefits of using an icon font:

• Resolution independence: works well on Retina displays.
• Can be customized by CSS: color, opacity, shadow, etc.
• Most icon fonts offer a large collection of commonly used icons - while remaining small in file size - covering possible future needs.
• Widespread browser support, including IE7 support.

I'd like to suggest ​Font-Awesome which is actively maintained, currently offers 361 icons and whose license is compatible with BSD.

A quick glance at the img assets of django.contrib.admin showed that most if not all icons have an equivalent in Font-Awesome.

Note: This issue was discussed on IRC with Idan and follows previous discussion on #19900.

[loic84]

​https://github.com/loic/django/compare/ticket20597

Proof of concept that replaces the following:

• add/change icons for each model on index.
• add/change/delete icon on the recent items widget on index.
• delete link icon on change_view.
• yes/no/unknown images on boolean fields.

I committed a sample project to make it easy to review: just syncdb, runserver then head to /admin/.

[Tim Graham]

Sample project looks good to me. I guess this approach supersedes #16216?

[Collin Anderson]

correct me if UX/UI is not proper here.

[Stephen Kerr]

Should you not use the more up to date Font Awesome?

​http://fortawesome.github.io/Font-Awesome/icons/

[Collin Anderson]

I also wonder if at some point we'll want to switch to svg. Though, we would need to drop IE8 first.

[Collin Anderson]

More on fonts vs SVG ​https://css-tricks.com/icon-fonts-vs-svg/. I think we should hold out until we can simply switch to SVG.

[Tim Graham]

If I read it correctly, IE8 support ends Jan. 12, 2016 so Django 1.10 or later should be a good candidate.

[Tim Graham]

Me on ​django-developers: "Now that Django 1.9 is slated for December and IE8 support ends the next month, I think it might be acceptable to drop IE8 support in 1.9 and go with the SVG solution now."

[elky]

Despite all advantages of inline SVG it is pretty complex solution to implement and support in Django admin.

1. SVG is pretty big to insert in markup (include tag for each icon as a solution?)
2. We can use simple <img> with SVG as a source but this approach is weak - we can't change SVG color in this case. So we'll have to serve already colorized SVG files (not flexible solution). There is ​JS solution to replace img with inline SVG but I'm not really sure that it's good practice.
3. There are many places where icons render in JS (widgets) - I don't see any not ugly solution to add inline SVG into it. Using div element with SVG as a background is a weak solution too - no way to colorize it (CSS3 mask has ​poor browser support)
4. 20+ additional server requests
5. Support. Contributors will have to add (and draw?) new icons manually which brakes development process.

I vote for font icons (like Font Awesome). ​See discussion in django-developers.

[Tim Graham]

If we lack other expert opinions (I am not one), I don't object to your reasoning.

[Marc Tamlyn]

This isn't a clear cut argument either way at the moment. Icon fonts are simpler to use in many cases, they can easily be coloured etc. Inline SVG I agree is not worth the extra work most of the time - unless you are wanting to change the SVG content a background is much easier and can be achieved with similar CSS.

SVG definitely wins on accessibility, which is something we need to consider, but I'm also happy with "working code".

[Collin Anderson]

We could instead just swap out our .gifs with .svg and not touch the markup much if at all (not inline the svg, leave them as img tags). That could be an even simpler situation than using fonts. It should be the same number of requests that we currently have (rather than a reduced number of requests).

Otherwise, I'm fine with fonts. I just wanted to make sure we looked into the SVG option before switching to fonts. The bonus is that we can keep IE8 support at little longer.

[elky]

Well, only week ago I was 100% happy with font icons. But after Collin's comment I vote for SVG (<img> with svg as a source).
Below I listed advantages/disadvantages for both options.

Font

• Customizing. Changing icon color with CSS
• Additional 100KB (font file + css)
• Lots of changes in CSS, HTML and JS
• To support IE8: just add *.ttf file (+ 70KB)
• Code Diff: ​https://github.com/django/django/compare/master...elky:font-icons?diff=unified&name=font-icons

SVG

• Much less changes
• Code is elegant - I actually just replaced gifs with svg in CSS. No pseudo-elements. No alignment tweaks
• 25 additional files (requests) but just 19KB in total
• To support IE8: add fallback in CSS (since we already have gif icons in the repo, my suggestion is to show them in IE8)
• Code Diff: ​https://github.com/django/django/compare/master...elky:svg-icons?diff=unified&name=svg-icons

And the final and main argument to choose SVG is that some apps use a bit overridden Django CSS classes so font approach may cause visual issues (I checked it with few CMS apps). So font approach is an extra headache for app developers.

[Hugo Osvaldo Barrera]

I mentioned this on the list, but don't see this mentioned here: Where do font-icons stand in terms of accessibility? Do we have something similar to the alt attribute?

[Tim Graham]

We are going with the inline SVG solution so we can use alt.

​PR (with some todos remaining).

[elky]

We cannot use alt for elements where image used as background. Actually Django had accessibility problems before SVG implementation -- there are only few places where alt attribute available.

I think we need separate ticket to implement accessibility support.

[Tim Graham <timograham@…>]

In c32b61c6:

Fixed #20597 -- Replaced admin GIF/PNG icons by SVG

[Tim Graham <timograham@…>]

In 22a791e:

Refs #20597 -- Fixed spelling of HiDPI.