Open vrih opened 5 years ago
If it can help, I tracked the direct link to SVG files for Material Icons.
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
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
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
https://material.io/tools/icons/static/icons/baseline-live_help-24px.svg
Should we insert the xml content of svg files inside the html content?
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:
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.
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.