Material-design-icons: 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.

[nezlicodes]

duh it's almost 2020!

[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]

pretty pleeaase

Meanwhile 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!