[icons] Include new twitter icon X

[edx-mostafa-eltahawy]

Summary 💡

The current twitter icon available under MUI is the old logo

Examples 🌈

The current twitter icon available under MUI is the old logo TwitterIcon from '@mui/icons-material/Twitter';

Motivation 🔦

The current twitter icon available under MUI is the old logo

[abreel]

@siriwatknp This is my first open source contribution and I want to try looking into this issue. Is that fine?

[siriwatknp]

@abreel Thanks for that! If you are interested, the PR is already open. Can you please take a look if it looks good to you? https://github.com/mui/material-ui/pull/38343

[abreel]

Thanks @siriwatknp

I will like to know which of the images I should use

as the new icon

[abreel]

Thanks @siriwatknp

I will like to know which of the images I should use

as the new icon

They are svg icons

[edx-mostafa-eltahawy]

Thanks @siriwatknp I will like to know which of the images I should use

as the new icon

They are svg icons

I believe the filled one on the right as the current twitter logo is only present in the filled variant as well.

[abreel]

@edx-mostafa-eltahawy Thanks

[abreel]

I have made the needed changes, but honestly don't know where or how to preview. Is there a documentation that could help with checking my changes in the codebase?

@edx-mostafa-eltahawy @siriwatknp

[abreel]

I have used yarn to install dependencies and tried running the server, but I can't work my way around checking the twitter icon. Any help will be appreciated

[edx-mostafa-eltahawy]

I have used yarn to install dependencies and tried running the server, but I can't work my way around checking the twitter icon. Any help will be appreciated

Contributing Guide

[edx-mostafa-eltahawy]

@abreel @siriwatknp any updates regarding the icon?

[abreel]

@edx-mostafa-eltahawy I have tried everything I could think of and still honestly can't find my way around the viewing the icon. I have updated the icon svg file at packages/mui-icons-material/custom/Twitter.js, but I still can't see it change in the browser

and even the localhost:3000/playground returns "not found"

[abreel]

@edx-mostafa-eltahawy @siriwatknp I made a pr to the master branch already

[IN2TEC]

Hey guys, is the new icon up in the libary? I am having difficulties finding it

[eriq123]

Hey guys, is the new icon up in the libary? I am having difficulties finding it

You can check the Twitter icon update here #38811

[iamchandanys]

Any idea when the new Twitter icon will be out?

[oliviertassinari]

38811 is a step in the right direction but doesn't deliver value.

I think there are more follow-ups needed on this to consider the problem solved:

• [x] 0. To actually make the icon available. Solved in #40365.
• [x] 1. Fix the search, the logo isn't shown when searching for X nor Twitter in https://deploy-preview-38811--material-ui.netlify.app/material-ui/material-icons/?query=X, https://deploy-preview-38811--material-ui.netlify.app/material-ui/material-icons/?query=twitter. We tried a bit in https://github.com/mui/material-ui/pull/40193#discussion_r1428063910. Solved in #40365.
• [ ] 2. Fix the balance, the "weight" of the brand logos feels strange, It doesn't feel balanced. The X feels too big relative to the other logos. (YouTube feels a bit too small, GitHub a bit too big, etc. https://master--material-ui.netlify.app/material-ui/material-icons/?query=brand)

• [ ] 3. In a few years, once enough of the Twitter brand is gone, remove the icon.

[harsh-ps-2003]

@oliviertassinari I am trying to use new X logo (import X from '@mui/icons-material/X') in Thanos-io project was failing. I tried finding the icon in MUI official website, but failed. Got module doesn't exist in my code. Can you please release this icon faster, we need it! Thanks