Replace icon fonts with SVG icons

[vrih]

Wallabag is pretty much unusable if 3rd party fonts are disabled. The interface is fully reliant on material icon font. Github have a good article on why they moved away from icon fonts.

[techexo]

If it can help, I tracked the direct link to SVG files for Material Icons.

Top bar and article list view

https://material.io/tools/icons/static/icons/baseline-add-24px.svg
https://material.io/tools/icons/static/icons/baseline-search-24px.svg
https://material.io/tools/icons/static/icons/baseline-filter_list-24px.svg
https://material.io/tools/icons/static/icons/baseline-get_app-24px.svg (replace file_download)
https://material.io/tools/icons/static/icons/baseline-view_module-24px.svg
https://material.io/tools/icons/static/icons/baseline-view_list-24px.svg
https://material.io/tools/icons/static/icons/baseline-rss_feed-24px.svg

https://material.io/tools/icons/static/icons/baseline-more_vert-24px.svg
https://material.io/tools/icons/static/icons/baseline-clear-24px.svg

Others are identical with lateral bar

Lateral bar

https://material.io/tools/icons/static/icons/baseline-arrow_back-24px.svg
https://material.io/tools/icons/static/icons/baseline-link-24px.svg
https://material.io/tools/icons/static/icons/baseline-refresh-24px.svg
https://material.io/tools/icons/static/icons/baseline-done-24px.svg
https://material.io/tools/icons/static/icons/baseline-star_border-24px.svg
https://material.io/tools/icons/static/icons/baseline-delete-24px.svg
https://material.io/tools/icons/static/icons/outline-label-24px.svg
https://material.io/tools/icons/static/icons/baseline-share-24px.svg
https://material.io/tools/icons/static/icons/baseline-print-24px.svg
https://material.io/tools/icons/static/icons/baseline-get_app-24px.svg (doublons)
https://material.io/tools/icons/static/icons/baseline-error-24px.svg

Article header & tile view

https://material.io/tools/icons/static/icons/baseline-timer-24px.svg
https://material.io/tools/icons/static/icons/baseline-today-24px.svg
https://material.io/tools/icons/static/icons/baseline-create-24px.svg
https://material.io/tools/icons/static/icons/baseline-person-24px.svg
https://material.io/tools/icons/static/icons/baseline-link-24px.svg (already used in lateral bar)
https://material.io/tools/icons/static/icons/baseline-comment-24px.svg

Config

https://material.io/tools/icons/static/icons/baseline-live_help-24px.svg

[Kdecherf]

Should we insert the xml content of svg files inside the html content?

[techexo]

I think that's what Github did (via a helper) to allow for colorization via CSS. As some of the icons on wallabag are used in grey, black, and white, it would probably be the same thing?

I am wondering also if it wouldn't be a good idea to use CSS sprites and use SVG xlink : https://css-tricks.com/svg-sprites-use-better-icon-fonts/ and https://css-tricks.com/svg-symbol-good-choice-icons/
In that way, you load one time the SVG, and after that it is trivial to make a link to the desired icon in the code.

The downsides:

• maybe not compatible with older browsers;
• having to store some icons in multiple colors if we can't change it on the fly.

[techexo]

I have created a gist with the code for all the icons in symbol nodes.

More information on svg sprite on Google Material Icon page, and there seems to be ways for older browsers to fallback when they don't support svg.

Regarding the color, the icons can inherit the color of the text they are illustrating.