Add a few existing icons to menus

[thiagowfx]

Do you follow the guidelines?

• I have tested my changes --> Fully tested locally, icons show up as expected.
• I read this document: https://miniflux.app/faq.html#pull-request

Notes:

• Only added pre-existing icons from sprite.svg. If desired, we could incorporate more icons from https://tabler-icons.io/, but opted to keep it simple / minimal for now.
• Only added the unambiguous items. Some examples are ambiguous, for example: ( ) Mark this page as read vs ( ) Mark all as read. There is a "mark all as read" icon already, however it could be deemed confusing to add both of them in the same context for two different actions, as the actions are very similar. I leave this open for debate.
• If you think there are more places to add existing icons to I could've missed, feel free to point them out.

Sample view attached below.

[fguillot]

Each menu links should have an icon for consistency. New icons could be added to sprite.svg. It could be tricky to find an icon for each action.

Only added the unambiguous items. Some examples are ambiguous, for example: ( ) Mark this page as read vs ( ) Mark all as read. There is a "mark all as read" icon already, however it could be deemed confusing to add both of them in the same context for two different actions, as the actions are very similar. I leave this open for debate.

• Maybe, this one could be used for "Mark this page as read": https://tabler-icons.io/i/check
• And this one for "Mark all as read": https://tabler-icons.io/i/checks

Open to suggestions if there are better icons on https://tabler-icons.io/

[thiagowfx]

I like your idea to distinguish between "mark" versus "mark all". Will send an updated patch in a few days.

[thiagowfx]

Added the two aforementioned icons. Missing, with some ideas:

• show all entries
• show only unread entries
• entries
• feeds
• create category ==> https://tabler-icons.io/i/plus?
• add subscription ==> https://tabler-icons.io/i/plus?
• import ==> https://tabler-icons.io/i/file-import
• export ==> https://tabler-icons.io/i/file-export

I'll wait for your feedback before adding more icons.

[fguillot]

Let's try something like that:

• show all entries: https://tabler-icons.io/i/eye
• show only unread entries: https://tabler-icons.io/i/eye-off
• entries: https://tabler-icons.io/i/file-text
• feeds: https://tabler-icons.io/i/news
• create category ==> https://tabler-icons.io/i/folder-plus
• add subscription ==> https://tabler-icons.io/i/plus
• import ==> https://tabler-icons.io/i/file-import
• export ==> https://tabler-icons.io/i/file-export

[thiagowfx]

Also added:

• categories: https://tabler-icons.io/i/folders

At this point there are so many icons it was hard to keep track of them all with individual commits; I've gone ahead and squashed everything.

[fguillot]

Actually, the category page (/categories) already had icons for feeds and articles. So, icon-news and icon-file-text should not be necessary, icon-feeds and icon-entries should be used instead. Sorry about that, I forgot about it in my last comment.

On more thing, in the file sprite.svg, it would be better to name the icons based on their usage in the application. For example, instead of having id="icon-eye", it could be id="icon-show-all-entries, id="icon-folder-plus" -> id="icon-add-category", etc. This way, the SVG content could be replaced easily if another icon is more suitable.

[thiagowfx]

Sorry about that, I forgot about it in my last comment.

No problem, fixed (in the same commit).

it would be better to name the icons based on their usage in the application

Did this in a separate commit for ease of review and to possibly spot typos, we could squash it once you're happy with it.

For reference:

ack -i 'icon.*check' -l | xargs sed -i -e 's/{{ icon "check" }}/{{ icon "mark-page-as-read" }}/g' &&\
ack -i 'icon.*checks' -l | xargs sed -i -e 's/{{ icon "checks" }}/{{ icon "mark-all-as-read" }}/g' &&\
ack -i 'icon.*eye' -l | xargs sed -i -e 's/{{ icon "eye" }}/{{ icon "show-all-entries" }}/g' &&\
ack -i 'icon.*eye-off' -l | xargs sed -i -e 's/{{ icon "eye-off" }}/{{ icon "show-unread-entries" }}/g' &&\
ack -i 'icon.*folder-plus' -l | xargs sed -i -e 's/{{ icon "folder-plus" }}/{{ icon "add-category" }}/g' &&\
ack -i 'icon.*plus' -l | xargs sed -i -e 's/{{ icon "plus" }}/{{ icon "add-feed" }}/g' &&\
ack -i 'icon.*file-import' -l | xargs sed -i -e 's/{{ icon "file-import" }}/{{ icon "feed-import" }}/g' &&\
ack -i 'icon.*file-export' -l | xargs sed -i -e 's/{{ icon "file-export" }}/{{ icon "feed-export" }}/g' &&\
ack -i 'icon.*folders' -l | xargs sed -i -e 's/{{ icon "folders" }}/{{ icon "categories" }}/g'

[fguillot]

LGTM. This page seems to have a missing icon: /category/create.

[thiagowfx]

Thanks, added. Also squashed the commits.