Change icons in web UI

[Gargron]

We're finally replacing Font Awesome with Material icons, consistent with our Android app. For now this is a pretty straightforward mapping of old icons to new icons, but Material gives us more possibilities (e.g. filled in for active, outline for inactive) that I imagine we'll explore gradually afterwards.

---

Fixes MAS-166, fixes #26617, fixes #1469

[vmstan]

Gave this PR a test run, and the icon alignment in post views is way off in Safari.

It appears fine in Chrome and Firefox

[vmstan]

More problematic on mobile.

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[github-actions]

This pull request has resolved merge conflicts and is ready for review.

[vmstan]

Safari issue is fixed.

[vmstan]

Reply content with client info appears misaligned for longer client names.

[vmstan]

Client information appears fixed now.

[ClearlyClaire]

The dropdown menu icon is definitely misaligned. Also, all icons on posts seem slightly too small. Finally, animations (fav icon and boost icon) are missing. The outline VS filled distinction is welcome, but it's not there for boosts, which has also lost its variants and animations.

I'm also running into an infinite loop in the advanced interface.

[vmstan]

I'm also running into an infinite loop in the advanced interface.

Was just coming here to say this.

[Gargron]

Also, all icons on posts seem slightly too small.

Material Symbols include padding in the SVGs which means the actual shapes are smaller than the equivalent Font Awesome symbols at the same container size. However, I have adjusted the sizes to be closer to what they used to be. I believe any remaining impression of smallness is just from them being a bit thinner design-wise.

Finally, animations (fav icon and boost icon) are missing

I won't re-add them. Favourite icon is about to become a heart, so spinning will make no sense anymore. There's a ticket for Sam to create interaction animations for the iOS/Android apps, once that exists I imagine we'll be able to port it back to web.

[colinstu12]

I won't re-add them. Favourite icon is about to become a heart, so spinning will make no sense anymore. There's a ticket for Sam to create interaction animations for the iOS/Android apps, once that exists I imagine we'll be able to port it back to web.

@Gargron
Where was it discussed or decided that the star should become a heart? The star is a lot more generic of an interaction than a heart is (that indicates liking/loving something). Not exactly the nicest thing to use with posts that contain bad or sad news/topics, etc.
Twitter made this same move too long ago and didn’t seem appropriate either.

[edoswald]

I understand we're changing the star to a heart, but in a thread on this on Mastodon came up with some interesting real-world data on the "star." It seems that people are using it for a variety of uses, some duplicating pre-existing features, like bookmarks. Changing it to a heart will also likely change its usage since the heart is used for status reactions on most other networks, so newbies will likely do it here.

Maybe before changing the star to a heart, maybe taking a look at the functionality the star provides, and rethinking it? I know this is a simple change, but it may result in some unintended consequences from an interaction standpoint, some of which may not be what the devs intended.

I think the base problem is nobody knows exactly what the star is for, or does. I'd be strongly in favor of considering a change to how the star works before such a switch.

[edoswald]

I won't re-add them. Favourite icon is about to become a heart, so spinning will make no sense anymore. There's a ticket for Sam to create interaction animations for the iOS/Android apps, once that exists I imagine we'll be able to port it back to web.

@Gargron Where was it discussed or decided that the star should become a heart? The star is a lot more generic of an interaction than a heart is (that indicates liking/loving something). Not exactly the nicest thing to use with posts that contain bad or sad news/topics, etc. Twitter made this same move too long ago and didn’t seem appropriate either.

I think it's fine. Meta decided to overcomplicate it with four other options. I also think the average consumer is mature enough to understand that the like is for the content, not necessarily the topic.

[brendanjones]

Please don’t change the star to a heart. Every time I go to favourite a post about a negative topic I’ll feel resistance. It won’t be the end of the world, but I won’t like it.

[ronilaukkarinen]

I don't know if this is the place to chime in about the stars vs. hearts, but I think it's fine. I really use the the star like a heart already (1. Acknowledged, I have read your post, 2. Sending love/understanding/agreement).

[edoswald]

I think you’re in the right place.

…

On Sun, Oct 29, 2023 at 6:07 PM Roni Laukkarinen ***@***.***> wrote: I don't know if this is the place to chime in about the stars vs. hearts, but I think it's fine. I really use the the star like a heart already (1. Acknowledged, I have read your post, 2. Sending love/understanding/agreement). — Reply to this email directly, view it on GitHub <#27385 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A4QGUNRWA2VWDCRWQKCW5ODYB3APJAVCNFSM6AAAAAA56EO33GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBUGIZTQOBYHE> . You are receiving this because you commented.Message ID: ***@***.***>

[Squaredude]

Adding my two cents on this matter.

My biggest concern with the usage of a "heart" icon is that it predisposes a certain mentality/emotion. As others have said, one can feel awkward "liking" / "hearting" ("loving"?) a post with tragic content.

But, on the abstract side of things, it seems manipulative, like something a for-profit would do.

One thing I've been liking about Mastodon is that the interface and the environment of the Fediverse is not algorithmic, not commercial, and therefore there is no need to encourage the users into having emotional interactions. "Bookmarks", "boosts", "stars"/"favorites", "posts"... these are neutral terms, they don't invoke emotions or predispose users to interact.

I hope the measure can be reconsidered. It's frankly disappointing that this was decided.

[Gargron]

I think you mean to comment on #27582

[Andre601]

I just say it straight away: These new reply icons are ugly... a simple line without any character whatsoever...

Why was this icon set selected? I personally would've recommended @mdi/svg which offers icons that look much more similar to the fontawesome icons... In addition are they also open source and free.

The current ones just feel... off.

And just to give a point is here a quick comparison

• Font Awesome (v5 pulled from iconify.design)
  
• New Icons used
  
• @mdi/svg icons
  

The mid ones have much more character and aren't as thin as the ones you now want to use, which at least for me are even hard to see when used (I'm on an instance that uses a dev build including these icons).

Also, the animation when adding a favourite seems not to be centered on the icon, having it spin with a off-center position...

[brendanjones]

I realise this is merged already, but wanted to ask why the Explore menu item doesn't use the Material explore icon (a compass)?

1. It is the 'correct' icon for such a menu item (at least on Android).
2. The Explore menu doesn't only let you explore hashtags, so using a hashtag icon excludes representing exploring posts, people and news.
3. Not using the hashtag icon would free up that icon to be used for "pin" hashtags in simple layout #11091

I know Twitter used the hashtag icon for explore so people are familiar with it, but we don't need to always follow what Twitter does, do we? :)