search

wallabag / wallabag

wallabag is a self hostable application for saving web pages: Save and classify articles. Read them later. Freely.
https://wallabag.org
MIT License
10.07k stars 757 forks source link

Replace icon fonts with SVG icons #3797

Open vrih opened 5 years ago

vrih commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

techexo commented 5 years ago

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:

techexo commented 5 years ago

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.