Missing social icons (G+, FB, Twitter, etc.)

[asadovsky]

These icons do appear to exist somewhere, e.g. https://www.gstatic.com/images/icons/material/system/2x/post_gplus_black_24dp.png https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png

They're also listed as Google-made icons on https://materialdesignicons.com/, e.g. https://materialdesignicons.com/icon/facebook-box

However, they are nowhere to be found in this repo.

[LunarDevelopment]

.. Do we know where these are.. ?

[codingcampbell]

@jestelle did you mean to close this without an explanation?

[LunarDevelopment]

Boooooo :-1: :-1: :-1: :-1: :-1:

[simodorg]

Need these icons, too.

[blackxored]

+1

[DrummerHead]

Google probably does not want to acknowledge the existence of other social apps.

However this snippet of code from the Templates section of mdl can be used:

https://github.com/google/material-design-lite/blob/master/templates/blog/styles.css#L348-L372

[angelxmoreno]

seriously though why was this closed? please elaborate @jestelle

[w0rldart]

Could really use those extra icons.

Thanks

[jestelle]

Hi all,

I really wish we could provide a consistent set of these social icons, but unfortunately most companies have relatively strict trademark guidelines on how 3rd-parties can use their trademarks.

Here are some links that might help you track down brand assets for several of the social networks we originally wanted to include in this set:

Instagram https://www.instagram-brand.com/

Tumblr https://www.tumblr.com/docs/en/trademark_guidelines

Pinterest https://business.pinterest.com/en/brand-guidelines

Twitter https://about.twitter.com/press/twitter-brand-policy

Facebook https://www.facebookbrand.com/guidelines?asset=2&media=1,2,3&platform=0

LinkedIn https://brand.linkedin.com/visual-identity/logo

Hope that helps.

[angelxmoreno]

tyvm for the explanation @jestelle . Really appreciate it.

[jestelle]

Oops. That above commit had nothing to do with this issue. Sorry about that.

[Shic1983]

+1

[netlander]

+1

[controversial]

Why are ionicons and Font Awesome allowed to include social icons but Google isn't?

@jestelle

[controversial]

Try searching social on ionicons:

[jestelle]

@controversial That's a question for each of the trademark holders.

We'd be happy to include social icons like this given the permission of those trademark holders, but at this time we haven't pursued getting that explicit permission.

Sorry for the inconvenience this might cause anyone.

[patrickml]

@jestelle can a community member attempt to get explicit permission from major social media platforms so that they can be added?

[jestelle]

@patrickml Maybe. We wouldn't necessarily be able to include something without getting the right lawyers to talk to each other and get the right permission in writing somewhere. But if a community member wanted to chase down contacts at non-Google organizations to and help set it up for us to be quick and easy to get done, that might help us.

[lukaskollmer]

Any updates on this? @jestelle @patrickml

[emanb29]

I'm no lawyer, but my understanding is that adherence to brands' trademark guidelines are the concern of the consumers of this icon set (i.e., the people actually displaying and using the logos), not the icon set itself. That said, it would be nice to get official permission for the set; I'm just not sure it's strictly necessary.

[MewX]

Well, I'm now using Font-awesome brands icons (officially separated), together with Material Icon font. It works fine, but not that perfect though

[thakyZ]

I would also like to know if there are any updates on this. Also if I could ask for a Steam icon for my website? (Steam as in Valve, Steam)

[englishextra]

That's unfortunate

[lizzymendivil]

Hi... I need social icons too. I found them here: https://materialdesignicons.com/ But I don't know how to import from my react project. Can anybody help me please? Thanks.

[englishextra]

@lizzymendivil I'm afraid you're not gonna get the answer.

Because different devs use different techiniques to use svg or to use a webfont version. In my case I place only needed icons in index.html markup - that way I dont need include large fonts with unneeded icons.

    <body>
        <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" role="complementary">
            <title>An SVG Source for UI Icons and Logos</title>
            <defs>
                <symbol id="ui-icon-outline-thumb_up_alt" viewBox="0 0 24 24">
                    <title>outline-thumb_up_alt</title>
                    <path fill="currentColor" d="M21,8h-6.31l0.95-4.57l0.03-0.32c0-0.41-0.17-0.79-0.44-1.06L14.17,1L7.59,7.59C7.22,7.95,7,8.45,7,9v10c0,1.1,0.9,2,2,2h9c0.83,0,1.54-0.5,1.84-1.22l3.02-7.05C22.95,12.5,23,12.26,23,12v-2C23,8.9,22.1,8,21,8z M21,12l-3,7H9V9l4.34-4.34L12.23,10H21V12z"></path>
                    <rect fill="currentColor" x="1" y="9" width="4" height="12"></rect>
                </symbol>
                <symbol id="ui-icon-share-outline" viewBox="0 0 24 24">
                    ...
            </defs>
        </svg>

...

        <a href="javascript:void(0);" class="btn-toggle-holder-vk-like mui-btn mui-btn--fab ripple" aria-label="Навигация" title="Нравится">
            <svg class="ui-icon">
                <use xlink:href="#ui-icon-outline-thumb_up_alt"></use>
            </svg>
        </a>

@controversial

ionicons aren't following the matrial icons specs. In simple terms. they're thinner than the ones at https://materialdesignicons.com/ , so use the latter to keep consistency in design. That's a recomendation. Not an order.

[lizzymendivil]

@englishextra thanks, But I already found how to :) thanks

`import { Google, Facebook, Twitter } from 'mdi-material-ui';

. . .

<Button variant="fab" color="primary" aria-label="Add">
        <Google />
 </Button>`

[jcwrightson]

As a sensible man, I'm pretty sure there would be no copyright infringement should Google decide to include social media icons within it's library. For a start, material-icons are free, so there's the "fair use policy". Anyway, for Google to not include these icons is a little ridiculous. How can you provide a contemporary icon library without them, everyone building for the web today invariably needs these icons, and we need to use these icons inline with other icons. So if Google cares about standardizing design language, please for the love of god... GIVE US THE GOD DAMN ICONS! Thanks :)

[jcwrightson]

goes back to font-awesome with a big sigh

[brndto]

goes back to font-awesome with a big sigh

I have a feeling it all comes down to brand style guides, an area where you should tread lightly.

The reason social media companies don't really mind it is because they are gaining something from having the icon on your page, because you're linking from (or next to) that icon right? You're directing them back to them, not many people who use the social media icons will change them drastically in a way that they cannot recognise the social media site.

But explicit permission in writing should have been sought a long long time ago, no excuse with the amount of maintainers & contributors we have here.

Take JetBrains for an example (especially their rules with using other colours): https://www.jetbrains.com/company/brand/

[englishextra]

i am very sorry are you talking to me?

[englishextra]

ICON font is the past i use svg embedded

[mkeen]

Too bad when someone on a team puts up roadblocks for no reason. These icons fall under fair use and are included in several other icon libraries. There's no reason for this not to be included here other than pure laziness.

[taniacr]

No news in the horizon about this issue?

[jayarjo]

Common.

[apdrsn]

I really think you should consider adding those icons to your library. My guess is that nearly 100% who use you library also need to use social icons.

The consumer have two options:

1. Use another library (might not be an option if design relies on material icons)
2. Add another library which have the needed icons = bad for performance

We don't need more unnecessary bytes on the internet – please add the icons!

[liesislukas]

i guess google won't add those icons to lib cause if they want to have a consistent view from other material design icons, logos need to follow material design guidelines. color, positioning, size, proportions etc. and those brands would not agree that such a big player as google would do that and would encourage everyone to use logos that do not follow official brand guidelines. meanwhile, everyone can easily find each of that icon as svg online for free and just use. I understand how it would be cool to have all in one lib but it's not a big deal to have icons directory and just drop in 5 or 10 svg icons found elsewhere. No need to import another full lib for that. there would be 0 extra bytes too, if imported correctly.

[vdegenne]

I am using this webcomponent if anyone interested :

npm install @lrnwebcomponents/social-media-icons --save-dev

import '@lrnwebcomponents/social-media-icons';

<iron-icon icon="social-media:github"></iron-icon>

(more info there)

[aress31]

+1 the only reason why I have to import Font Awesome in most of my projects is only to get access to the social icon which is an overkill for only couple of social icons. I wish Google would do something about that!

[R-W-C]

Still the same problem in january 2021.

What I did was downloading SVG files from flaticon.com (https://www.flaticon.com/packs/social-media-logos-2?k=1610665942395). All the main social media icons are present. You can download the whole pack at once.

I just picked the ones I needed. After that I followed the guide on mediatemple.net (https://mediatemple.net/blog/design-creative/creating-implementing-icon-font-tutorial/) on how to create a font file.

I created the font file as described on icomoon.io (https://icomoon.io/app/#/select)

After generating the font, a download started. In the downloaded file there is a demo.html file which exactly shows you how to use your generated font. Sweet!

I realize these are not Material Design icons, but they suited me well. It might be useful to you.

[singlesoup]

Let's see how long it goes?

[R-W-C]

Another source for perfect icons in svg format is https://logotyp.us. An example: https://logotyp.us/logo/facebook/

The site seems to contain the official brand logo's. Google plus is missing though. (It can be found here https://commons.wikimedia.org/wiki/File:Google_Plus_logo_2015.svg )

You can use the method I described in my previous message to create your own font file with the logo's.

But why are we looking for missing social icons in the Material Design icons collection? Social media logo's are logo's and they do not meet the Material Design requirements by default. They just don't exist. We cannot expect Google to have their own version of other brands logo's.

So let's stop the quest. You cannot expect Google to add logo's which do not comply with their own guide lines and other brands don't want their logo's to be changed (malformed), and why would they? They could all decide to make a Material Design version of their logo, but that ain't gonna happen.

[bernaferrari]

Google has added Facebook icon, but not any other social network for now :(

[taniacr]

So how's everyone doing during this pandemic?

[chirejaszy]

06-09 09:21:20.014 W/re-initialized>(12286): type=1400 audit(0.0:3667): avc: denied { read } for name="u:object_r:mtk_amslog_prop:sdk" dev="tmpfs" ino=8365 scontext=u:r:untrusted_app_25:s0:c512,c768 tcontext=u:object_r:mtk_amslog_prop:rilitclass=file permissive=root

[aneesshameed]

Google has added Facebook icon, but not any other social network for now :(

Someone from Google went to WhatsApp and Twitter to get the icons, but the bag they took was too small was not able to pick icons from there. Next time they will go with a bigger bag.

[bernaferrari]

Facebook was removed, but Wechat was added.

[jpoints]

Ahhhhhhhhhhhhhhhhhhhhhhhhhhhhh!!!!!!!!!!! I was going to propose using this as part of some design tools, but the social icons are most extra super duper important. I'll have to handle social icons with a different system, if I decide to use this.

This is free, so I cannot complain too much that they are missing. But if there is some sinister Google master plan that is associated with widespread use of this icon library, the missing social icons is hindering adaptation. Pinky please explain to Brain that the social icons are most important.

[hicham-saddek]

For god's damn sake, please include these icons within your library, we've had enough, we really should think about going on strike because of those missing icons, we end up adding an other library just for social media icons, which are basically within the fair use policy, so no need to do this to us, you are hurting my eyes when i code, ending up importing more libraries, and writing inconsistent code, just because Google open source team doesn't want to add at least 4 ducking icons in their library, should really do a PR request and push it to be accepted :!!!

[bernaferrari]

Wechat was removed, Duo was added. What is going on?!

[hicham-saddek]

We still need the rest like facebook, or google icons... many devs are using them for social media login buttons for example...