18 ms·

Icons – Google Fonts

335 points by zuhayeer 6y ago

jfk13 6y ago
I see they promote the ligature approach: <span class="material-icons">face</span> where the font is expected to ligate the characters 'f', 'a', 'c', 'e' into a single <face> glyph. This can be problematic on the web, as it means that if a user doesn't get your webfont for any reason (download failed, browser settings that disable webfonts, accessibility options that override fonts for clarity, etc) the entire word will appear in a fallback font, often totally disrupting the layout. (Can your site adapt nicely to a word, or even an entire phrase -- e.g. "format list bulleted" -- appearing in the toolbar where you expected a single icon?)
- tobyhinloopen 6y ago
  I just set overflow: hidden and a width of 1em (so it’s a square)
  - jfk13 6y ago
    In which case the layout may survive, but I expect the "labels" that appear when the icon font fails will be cropped to their first couple of letters or so: not a great fallback in terms of helping the user understand what they're meant to be.
- chrismorgan 6y ago
  Also, most of the time icons should instead fall back to nothing (and should be hidden from screen readers). The main exception that one will observe in reality is a toolbar of icons only with no labels; it’s well understood in usability circles that that’s a dangerous pattern at best—text labels and icon-and-text labels both almost always simply work better. I deem the ligature approach bad because it encourages leaving something in the document and accessibility tree that shouldn’t be there, and most commonly in a non-semantic way (e.g. a send button might end up showing something like “paper airplane”, which is terrible, or with this specific font, “Learn more →” might become “Learn more arrow_right_alt”), or with semantics that you’ll definitely break at some point (e.g. report_problem is , but if you use that for an alert icon it’ll mislead anyone that ends up reading report_problem; in short, any new semantics you desire for an icon, you need to create a new ligature for it if the user can possibly ever be exposed to it).
- dragonwriter 6y ago
  If they don't load the icons (whether they are image icons or font icons or svg icons), the presentation is badly busted in any case.
echelon 6y ago
Neat. I've got a wild idea. What if instead of trying to destroy the web [1], Google tried to become the very best company for web developers? You know, take a play from Microsoft's "Developers Developers Developers" playbook after it was handed off to Nadella. The hip Microsoft that built VSCode, bought Github, and has the #2 cloud. Maybe a first class web has "native apps" that work on desktop and Android and don't require an App Store. That might handicap their rival Apple, because writing for web once targets two of the biggest three platforms. Get "distribution/promotion" through Search. Their ecosystem works, ties together, and makes sense. If Web wins and Google is #1 at it, then nearly all of their foes lose power. They can sell tools, build a flywheel, moat, all in one. And they wouldn't even have to be assholes anymore. All the cool kids stop hating. I don't expect their leadership to come up with this grand idea, however. We're just going to get more of the same. More wood behind all the arrows, none of which hit the target and all of which get cancelled in two to five years. [1] (Chrome, AMP, killing adblock, knee-capping HTML5, ruining semantic standards, making search a hard problem)
- v7p1Qbt1im 6y ago
  They do push for that though. Via PWA/WebAssembly.
amelius 6y ago
So WingDings but by Google. GoogDings? Did anyone convert them to SVG yet?
- momothereal 6y ago
  When you click on an icon you can choose to download it as SVG or PNG.
momothereal 6y ago
Not a fan of how the entire page is squished when clicking on an icon. All the icons get displaced and it's a pain to find where you were in the list...
SquareWheel 6y ago
The real benefit here is that you can export these as SVG. Please do this instead. Icon fonts are convenient, but they're really bad for web performance. It needs to download the entire font even if there's only a handful of icons on a page. SVGs have excellent browser support, and decent CMS support. You can enable them in Wordpress for example with a little tinkering. If you want to make your site faster (and I hope you do), then definitely consider SVGs.
- EveYoung 6y ago
  Or get the SVGs from Github directly: https://github.com/google/material-design-icons https://github.com/google/material-design-icons
- ficklepickle 6y ago
  Keep in mind the quantity of DOM nodes being rendered, especially on mobile. For example, this[0] page loads too slowly on low-end mobile, even though each individual SVG is aggressively optimized to be a tiny file size. I need to replace them with PNG/WebP. The file sizes would increase, but overall performance would be better (I have tested this). Now these are illustrations, which are more complex than icons. 0 - https://justtrivia.fun/categories https://justtrivia.fun/categories
  - SquareWheel 6y ago
    Good point about DOM size. I wonder if using external SVGs would have had the same effect? I don't know enough about browser rendering to know if that matters.
- pests 6y ago
  Semi related but there was a HN post a few weeks back about a tool that would scan your site and then modify the font file to only include the characters or icons you actually used. I still think SVGs are a better option.
1f60c 6y ago
And a slick new design!
visarga 6y ago
A foundational effort, this will help many.
eurasiantiger 6y ago
The provided usage example is bad for accessibility: the name of the icon, e.g. ”check_circle”, will be announced by screen readers. If there is other contextual information that explains the icon, the icon can be hidden from screen readers using aria-hidden=”true”. However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Also, never use Google’s CDN for loading fonts or icons — always self-host them. The CDNs are used to track your users.
- charcircuit 6y ago
  >However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Why? It's the screen reader's job to inform users of what's on their screens. It's not my job to give descriptions to things. >The CDNs are used to track your users. Do you have any evidence to support this claim?
  - madeofpalk 6y ago
    As a web developer, it literally is your only job to make a website that is usable by people.
    - adflux 6y ago
      By which people? I think thats up to the developer to decide.
      - monsieurbanana 6y ago
        1. Not always 2. Obviously mostly yes, but in hn people just assume that you're a somewhat good person who wouldn't knowingly restraint internet access to people with disabilities
      - thinkxl 6y ago
        Of course that's up for the developer to decide. You can't force a developer to make a website accessible to all people regarding of their capabilities. But you have to remember the initial goal of why the Internet started as open and what was the initial goal, to make all information accessible to everyone, that's why accessibility standards were there since the beginning. That was the entire goal of the web, to be open and accessible to EVERYONE. But if you want to go full head on capitalism and argue it doesn't matter for business, accessibility is literally search engine optimization, which is great for business. Googlebot is blind and doesn't use a mouse to surf the web. From any perspective Accessibility is a requirements for any website or web application. Of course, nobody can force developers to make websites accessible. Wait, yeah they can: * https://www.reuters.com/article/us-usa-court-dominos-pizza/u-s-supreme-court-rejects-dominos-bid-to-avoid-disabilities-suit-idUSKBN1WM1P1 https://www.reuters.com/article/us-usa-court-dominos-pizza/u...
wodenokoto 6y ago
So now users need to download several megabytes of font to display check marks and search icons or is there something I’m misunderstanding?
- paul_f 6y ago
  It is a 42KB file for 600 icons.
  - michelb 6y ago
    I would have expected it to work like the fonts, where you only query the things you need, and not everything. For performance reasons I assume people would still make a custom font/SVG set with only the icons they need.
  - jug 6y ago
    And which would additionally, I assume, replace the use of bitmaps. I'm surprised this question was even raised because vector graphics is the most size efficient way to do simple graphics on the web.
- Hasnep 6y ago
  From the developer guide: > The icon font weighs in at only 42KB in its smallest woff2 format and 56KB in standard woff format. By comparison, the SVG files compressed with gzip will generally be around 62KB in size, but this can be reduced considerably by compiling only the icons you need into a single SVG file with symbol sprites. So not that large, but I still prefer SVG icons.
  - happymellon 6y ago
    It's nice that they provide a git repo for this font with all the icons in SVG format
x3c 6y ago
Great to see Social distancing related icons in the list.
- jansan 6y ago
  Or sad, depending on your point of view.
jfoster 6y ago
Are Google serious? Simultaneously pushing websites to be highly efficient (Core Web Vitals), at the same time as introducing the methods that can make them less efficient. Also, about these icons, they mention "please don’t try to sell them", immediately followed by "Apache license 2.0". Well, Google, which is it? Do they actually mean to say "you have permission to sell them, but please don't?"
- throwaway3699 6y ago
  You'd prefer Google throw them under a proprietary license instead of asking nicely?
  - eurasiantiger 6y ago
    I don’t care since the icon font approach is technically inferior to SVG icons: it’s monochrome only, whereas SVG supports colors and transparency. Icon fonts also suffer from a plethora of rendering issues across platforms because fonts are usually rendered with speedy display of long text in mind. It’s strange Google would invest in a years-old kludge tech.
    - jfoster 6y ago
      Well, it's a good thing it's under Apache 2.0, then. Maybe someone will convert/trace them as SVGs and sublicense them...
      - scoot 6y ago
        They're available as SVGs. They link to the GitHub repo at the top of the page, and if you select any icon, there's a download SVG button.
    - mappu 6y ago
      Fonts can actually contain coloured glyphs now, originally for emoji. Although it does seem like a layering violation.
codepsycho 6y ago
AFAIK it hasn't "added support". We've used material icons for a year or two now from Google Fonts. Good to see this getting adoption but it's been available for some time
TonyTrapp 6y ago
Regular reminder that icon fonts are bad for accessibility and are technically troublesome also in other ways: https://github.blog/2016-02-22-delivering-octicons-with-svg/ https://github.blog/2016-02-22-delivering-octicons-with-svg/
- petters 6y ago
  When developing, the fact that icon fonts follow the size and color of the surrounding text is nice, though. E.g. when tweaking the text color of a button. At least in my limited frontend experience.
  - DangerousPie 6y ago
    SVGs can do the same thing.
    - tobyhinloopen 6y ago
      That SVG does have to be inline though, which drastically increases your HTML page’s size. You cannot style an SVG loaded in an IMG element. Imagine rendering 50 rows with each 6 icons, 1kb each. There are 6 unique icons, so it’s only 6kb each loading them from the server, but inline you’ll have 300kb of SVG icons
      - DangerousPie 6y ago
        You can use an "SVG sprite" with <use>. No need to inline the SVG every time.
        tobyhinloopen 6y ago
        Oh? I have to look that up
        DangerousPie 6y ago
        Took me a while to figure it all out, but it works surprisingly well. I have been using https://icomoon.io/ https://icomoon.io/ to generate the sprites. They also provide a JS polyfill to support IE.
wgx 6y ago
I have Google Fonts blocked in uBlock Origin now, and it's really helped pages load quicker and feel more snappy. I added these lines to uBlock: fonts.gstatic.com fonts.googleapis.com Occasionally some icons break on a few sites, but mostly it's plain sailing.
- Jach 6y ago
  Something I still find hilarious is that after a product I worked on started to enforce a content security policy, the #1 blocked source was always for google font resources. Of course users could whitelist the domains, but many didn't and anyway their sites looked fine.
- matkoniecz 6y ago
  Is it supposed to be added to "My filters" tab in settings?
  - wgx 6y ago
    Yep, just add those lines in there and save.
- mnadkvlb 6y ago
  would something like that also work on a pihole ? that would be perfect for the other devices too that dont have possibility to use ublock thanks
  - wgx 6y ago
    Yes - you can block domains at the network-level with a pihole.
- Shadonototro 6y ago
  the problem aren't the fonts, the problem is the developpers who made the websites with shitty performance this font is quite small
rafaelturk 6y ago
Seriusly if you care just a little for your users Dont use this! Use SVGs.
a1o 6y ago
Whenever Google makes something too easy to use for development I get a feeling they are moving on from it - in this case Material.
- _nalply 6y ago
  Because it's not a distinguishing factor anymore, so let's give it to the masses.
- joshgoldman 6y ago
  And moving towards what?
mortenjorck 6y ago
This will probably end up left unfinished like Google Fonts’ variable font support. I don’t understand how they commission high-quality fonts from professional foundries, then turn around and neuter them in the Google Fonts UI – take a look at the family called Commissioner: https://fonts.google.com/specimen/Commissioner https://fonts.google.com/specimen/Commissioner Can you tell from this page that the font contains italics? Or that it has a semi-serif flared-terminal variant? These are additional axes that simply aren’t supported, so there’s no way to know they exist unless you visit the foundry’s GitHub page.
- rememberlenny 6y ago
  They are actively working on this. I worked on Google Fonts, and you’d be incredibly surprised how few people run the entire service. If I recall correctly, ether ratio is something like one Google Fonts team member is responsible for the equivalent opt hundreds of millions of requests a day. The main focus they had in the variable fonts roll out was making the internet faster. The process of choosing when to/not serve variable fonts behind the scenes was oriented around the font-weight axis, so they could reduce the number of requests, and hence speed up everything from Google searches to YouTube and every other website using Google Fonts. Sadly the UX around displaying axes isn’t straight forward. Since the Google Fonts wants to setup a conservative interface, that doesn’t result in users requesting an entire variable axes with every request, especially when it’s not being used - there needed to be more work than just showing the font’s design space on a specimen page. There is an incredible amount of behind the scenes effort from an incredibly talented team. Huge props to each of them.
jokoon 6y ago
How do I download the png? The PNG are all in several subfolders...
emarthinsen 6y ago
Interesting that they have icons for "nordic walking" and "electric rickshaw", but nothing for twitter or a tweet.
- Macha 6y ago
  Seems pretty clear they're avoiding icons that specifically reference 3rd party brands. What would a generic icon for a tweet be that differs from a "message" icon?
  - emarthinsen 6y ago
    Maybe. They have a Facebook one and a few for some other social platforms. I'm not sure why there isn't one for Twitter and GitHub. I'm not saying there is any strategy going on, it's just interesting to see what is and isn't included in icon sets.
ChrisArchitect 6y ago
Announcement blog post: https://material.io/blog/google-fonts-material-icons https://material.io/blog/google-fonts-material-icons
viktorcode 6y ago
This looks like it was created for Android app developers. Having a single set of most used icons across different apps improves consistency, which will be welcomed by the users.
artur_makly 6y ago
Seems like someone should launch an open-source pro-WCAG icon set ;-)
Phillips126 6y ago
For ReactJS developers, this is always my go-to: https://react-icons.github.io/react-icons https://react-icons.github.io/react-icons Tons of SVG icons from popular packs and using ES6 imports, you only bundle the icons you use.
crazygringo 6y ago
Wow. I wonder what this means for the future of Font Awesome. I know plenty of people are anti-Google, and also prefer SVG's over icon fonts for valid reasons (though you can download these as SVG's as well). But now that this is easier to embed than Font Awesome, has basically the same number/range of icons as Font Awesome's free tier, doesn't come with the 10K pageviews/mo. restriction that Font Awesome's free tier comes with, and so many sites already use Google Fonts for their display and/or body text... ...I'd be very surprised if this doesn't quickly become the new de-facto standard icon font.
- bredren 6y ago
  Font Awesome’s product has long been destined for commoditization. Which is probably why they have diversified to offering custom icons and other differentiating behavior. I suspect google won’t be the only one to offer icon sets like this, so in general I agree this will continue to erode FA’s market share. Fwiw, It has felt like FA’s most recent release fell far behind schedule.
deleted 6y ago
[deleted]
vagab0nd 6y ago
Google Fonts used to have this great feature where I can select a number of fonts and view them all on a single page. It was super useful because I can type in any text and preview the text in these selected fonts. However, I can't seem to find this feature any more. Right now if I select fonts, they just show up in the sidebar. But I can preview them in any way. There's gotta be something that I missed?
- crazygringo 6y ago
  It still totally works that way on Google Fonts homepage, nothing has changed. The icons page is just a separate page that works differently from the rest of the fonts.
- tomasroggero 6y ago
  After you selected a few, you can review your selection in the Share page. For example, https://fonts.google.com/share?selection.family=Akaya%20Telivigala%7CRoboto:wght@100;400 https://fonts.google.com/share?selection.family=Akaya%20Teli...
  - vagab0nd 6y ago
    Wow, thank you! Why in the hell would they hide such a useful feature?
reaperducer 6y ago
I like that the SVGs are available under the Apache license. Because of that, I may actually get some use out of these. Does anyone know if Apple's SF Symbols are available under a similar license? I looked at Apple's web site, and it only mentions not using them in trademarks.
- hundchenkatze 6y ago
  I don't think you're allowed to redistribute them. Apple considers them system-provided assets, so you can only use them on systems that provide them. > Availability of individual symbols and features varies based on the version of the system you’re targeting. When you export a symbol introduced in SF Symbols 2 as an SVG template and bundle it with your app, you can use it in apps that target iOS 13, Mac Catalyst 13, tvOS 13, or watchOS 6 > All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/ https://developer.apple.com/design/human-interface-guideline... Link to the sdk terms: https://developer.apple.com/terms/ https://developer.apple.com/terms/
systemvoltage 6y ago
I am sorry but I am going to be that guy. Iconography has regressed so much, it's all the same optically to me. Designers keep pushing minimalism and line-graphics to "reduce crud" like its some sort of a religion. We can't distinguish icons well. There is no effort put into making them more unique and recognizable. What a horrible cult. Check out these glorious past remnants that we've forgotten about, they were so uhhh iconic : http://www.famfamfam.com/lab/icons/ http://www.famfamfam.com/lab/icons/ We love to see someone take Fam Fam Fam icons and create SVG versions of them. Iconography takes time and effort and enormous amount of patience, skill. You can't do this in a week in illustrator which is how it seems most icons are designed today. We've become lazy, want free stuff and no one is incentivized to spend 2 years creating amazing icons. The market for paid icons doesn't exist and we've done this to ourselves because we're addicted to free stuff. Google services icons? All impossible to tell apart now. Apple macOS dock? They use to be different shapes and sizes, now they are all chicklet squares in macOS Big Sur. Apple fired the guy (Forstall) that was the brilliant mind behind Apple's approach to UI way back in 2013. Since then, Apple UI design sucks. It is all getting worse, day by day, icon by icon. Iconography was a discipline people took seriously before 2010's. Windows 95, 98, XP icons were so amazing. They thought deeply about it. No one gives a shit anymore.
- JKCalhoun 6y ago
  Minimalism has a place — esp. with reduced screen real-estate. An icon I would display in my tool bar or on a button is different than an icon I would display on the desktop. My beef with Google's icons is the seeming random decision to use rounded miters on some art, sharp miters on others. Very mish-mash.
  - systemvoltage 6y ago
    > reduced screen real-estate Don't get me started on how much space we waste on any UI these days. Apart from HN UI, pretty much every website and desktop app has wastage of space. I suspect, we stopped using borders - thanks to minimalism, that we need to use copious amounts of negative space to separate them. So, now paddings and margins are liberally applied everywhere.
avipars 6y ago
i use font awesome and material design icons daily!
tonoto 6y ago
All those icons and no icon for +1 ?
sandreas 6y ago
Sounds a bit like MAUI* for dotnet... I'm very skeptical about one framework / project to solve UI problems on all common platforms but it is nice to see, that there is effort to improve the developer experience in more than one language. * https://github.com/dotnet/maui https://github.com/dotnet/maui
stevewillows 6y ago
I really wish they'd bring these in for Google Sheets, too. There are times where I want to sex up a sheet but don't want to bring in external images.
avereveard 6y ago
this looks like it's very early beta. lots of the outlined icon are filled, and lots of the icon change shape proportions dramatically between the different kind, say, filled and rounded, making it impossible to use the stiles together like you could with font awesome

335 points by zuhayeer 6y ago

I see they promote the ligature approach: <span class="material-icons">face</span> where the font is expected to ligate the characters 'f', 'a', 'c', 'e' into a single <face> glyph. This can be problematic on the web, as it means that if a user doesn't get your webfont for any reason (download failed, browser settings that disable webfonts, accessibility options that override fonts for clarity, etc) the entire word will appear in a fallback font, often totally disrupting the layout. (Can your site adapt nicely to a word, or even an entire phrase -- e.g. "format list bulleted" -- appearing in the toolbar where you expected a single icon?)

tobyhinloopen 6y ago
I just set overflow: hidden and a width of 1em (so it’s a square)
- jfk13 6y ago
  In which case the layout may survive, but I expect the "labels" that appear when the icon font fails will be cropped to their first couple of letters or so: not a great fallback in terms of helping the user understand what they're meant to be.
chrismorgan 6y ago
Also, most of the time icons should instead fall back to nothing (and should be hidden from screen readers). The main exception that one will observe in reality is a toolbar of icons only with no labels; it’s well understood in usability circles that that’s a dangerous pattern at best—text labels and icon-and-text labels both almost always simply work better. I deem the ligature approach bad because it encourages leaving something in the document and accessibility tree that shouldn’t be there, and most commonly in a non-semantic way (e.g. a send button might end up showing something like “paper airplane”, which is terrible, or with this specific font, “Learn more →” might become “Learn more arrow_right_alt”), or with semantics that you’ll definitely break at some point (e.g. report_problem is , but if you use that for an alert icon it’ll mislead anyone that ends up reading report_problem; in short, any new semantics you desire for an icon, you need to create a new ligature for it if the user can possibly ever be exposed to it).
dragonwriter 6y ago
If they don't load the icons (whether they are image icons or font icons or svg icons), the presentation is badly busted in any case.

echelon 6y ago

Neat. I've got a wild idea. What if instead of trying to destroy the web [1], Google tried to become the very best company for web developers? You know, take a play from Microsoft's "Developers Developers Developers" playbook after it was handed off to Nadella. The hip Microsoft that built VSCode, bought Github, and has the #2 cloud. Maybe a first class web has "native apps" that work on desktop and Android and don't require an App Store. That might handicap their rival Apple, because writing for web once targets two of the biggest three platforms. Get "distribution/promotion" through Search. Their ecosystem works, ties together, and makes sense. If Web wins and Google is #1 at it, then nearly all of their foes lose power. They can sell tools, build a flywheel, moat, all in one. And they wouldn't even have to be assholes anymore. All the cool kids stop hating. I don't expect their leadership to come up with this grand idea, however. We're just going to get more of the same. More wood behind all the arrows, none of which hit the target and all of which get cancelled in two to five years. [1] (Chrome, AMP, killing adblock, knee-capping HTML5, ruining semantic standards, making search a hard problem)

v7p1Qbt1im 6y ago
They do push for that though. Via PWA/WebAssembly.

amelius 6y ago

So WingDings but by Google. GoogDings? Did anyone convert them to SVG yet?

momothereal 6y ago
When you click on an icon you can choose to download it as SVG or PNG.

momothereal 6y ago

Not a fan of how the entire page is squished when clicking on an icon. All the icons get displaced and it's a pain to find where you were in the list...

SquareWheel 6y ago

The real benefit here is that you can export these as SVG. Please do this instead. Icon fonts are convenient, but they're really bad for web performance. It needs to download the entire font even if there's only a handful of icons on a page. SVGs have excellent browser support, and decent CMS support. You can enable them in Wordpress for example with a little tinkering. If you want to make your site faster (and I hope you do), then definitely consider SVGs.

EveYoung 6y ago
Or get the SVGs from Github directly: https://github.com/google/material-design-icons https://github.com/google/material-design-icons
ficklepickle 6y ago
Keep in mind the quantity of DOM nodes being rendered, especially on mobile. For example, this[0] page loads too slowly on low-end mobile, even though each individual SVG is aggressively optimized to be a tiny file size. I need to replace them with PNG/WebP. The file sizes would increase, but overall performance would be better (I have tested this). Now these are illustrations, which are more complex than icons. 0 - https://justtrivia.fun/categories https://justtrivia.fun/categories
- SquareWheel 6y ago
  Good point about DOM size. I wonder if using external SVGs would have had the same effect? I don't know enough about browser rendering to know if that matters.
pests 6y ago
Semi related but there was a HN post a few weeks back about a tool that would scan your site and then modify the font file to only include the characters or icons you actually used. I still think SVGs are a better option.

1f60c 6y ago

And a slick new design!

visarga 6y ago

A foundational effort, this will help many.

eurasiantiger 6y ago

The provided usage example is bad for accessibility: the name of the icon, e.g. ”check_circle”, will be announced by screen readers. If there is other contextual information that explains the icon, the icon can be hidden from screen readers using aria-hidden=”true”. However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Also, never use Google’s CDN for loading fonts or icons — always self-host them. The CDNs are used to track your users.

charcircuit 6y ago
>However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Why? It's the screen reader's job to inform users of what's on their screens. It's not my job to give descriptions to things. >The CDNs are used to track your users. Do you have any evidence to support this claim?
- madeofpalk 6y ago
  As a web developer, it literally is your only job to make a website that is usable by people.
  - adflux 6y ago
    By which people? I think thats up to the developer to decide.
    - monsieurbanana 6y ago
      1. Not always 2. Obviously mostly yes, but in hn people just assume that you're a somewhat good person who wouldn't knowingly restraint internet access to people with disabilities
    - thinkxl 6y ago
      Of course that's up for the developer to decide. You can't force a developer to make a website accessible to all people regarding of their capabilities. But you have to remember the initial goal of why the Internet started as open and what was the initial goal, to make all information accessible to everyone, that's why accessibility standards were there since the beginning. That was the entire goal of the web, to be open and accessible to EVERYONE. But if you want to go full head on capitalism and argue it doesn't matter for business, accessibility is literally search engine optimization, which is great for business. Googlebot is blind and doesn't use a mouse to surf the web. From any perspective Accessibility is a requirements for any website or web application. Of course, nobody can force developers to make websites accessible. Wait, yeah they can: * https://www.reuters.com/article/us-usa-court-dominos-pizza/u-s-supreme-court-rejects-dominos-bid-to-avoid-disabilities-suit-idUSKBN1WM1P1 https://www.reuters.com/article/us-usa-court-dominos-pizza/u...

wodenokoto 6y ago

So now users need to download several megabytes of font to display check marks and search icons or is there something I’m misunderstanding?

paul_f 6y ago
It is a 42KB file for 600 icons.
- michelb 6y ago
  I would have expected it to work like the fonts, where you only query the things you need, and not everything. For performance reasons I assume people would still make a custom font/SVG set with only the icons they need.
- jug 6y ago
  And which would additionally, I assume, replace the use of bitmaps. I'm surprised this question was even raised because vector graphics is the most size efficient way to do simple graphics on the web.
Hasnep 6y ago
From the developer guide: > The icon font weighs in at only 42KB in its smallest woff2 format and 56KB in standard woff format. By comparison, the SVG files compressed with gzip will generally be around 62KB in size, but this can be reduced considerably by compiling only the icons you need into a single SVG file with symbol sprites. So not that large, but I still prefer SVG icons.
- happymellon 6y ago
  It's nice that they provide a git repo for this font with all the icons in SVG format

x3c 6y ago

Great to see Social distancing related icons in the list.

jansan 6y ago
Or sad, depending on your point of view.

jfoster 6y ago

Are Google serious? Simultaneously pushing websites to be highly efficient (Core Web Vitals), at the same time as introducing the methods that can make them less efficient. Also, about these icons, they mention "please don’t try to sell them", immediately followed by "Apache license 2.0". Well, Google, which is it? Do they actually mean to say "you have permission to sell them, but please don't?"

throwaway3699 6y ago
You'd prefer Google throw them under a proprietary license instead of asking nicely?
- eurasiantiger 6y ago
  I don’t care since the icon font approach is technically inferior to SVG icons: it’s monochrome only, whereas SVG supports colors and transparency. Icon fonts also suffer from a plethora of rendering issues across platforms because fonts are usually rendered with speedy display of long text in mind. It’s strange Google would invest in a years-old kludge tech.
  - jfoster 6y ago
    Well, it's a good thing it's under Apache 2.0, then. Maybe someone will convert/trace them as SVGs and sublicense them...
    - scoot 6y ago
      They're available as SVGs. They link to the GitHub repo at the top of the page, and if you select any icon, there's a download SVG button.
  - mappu 6y ago
    Fonts can actually contain coloured glyphs now, originally for emoji. Although it does seem like a layering violation.

codepsycho 6y ago

AFAIK it hasn't "added support". We've used material icons for a year or two now from Google Fonts. Good to see this getting adoption but it's been available for some time

TonyTrapp 6y ago

Regular reminder that icon fonts are bad for accessibility and are technically troublesome also in other ways: https://github.blog/2016-02-22-delivering-octicons-with-svg/ https://github.blog/2016-02-22-delivering-octicons-with-svg/

petters 6y ago
When developing, the fact that icon fonts follow the size and color of the surrounding text is nice, though. E.g. when tweaking the text color of a button. At least in my limited frontend experience.
- DangerousPie 6y ago
  SVGs can do the same thing.
  - tobyhinloopen 6y ago
    That SVG does have to be inline though, which drastically increases your HTML page’s size. You cannot style an SVG loaded in an IMG element. Imagine rendering 50 rows with each 6 icons, 1kb each. There are 6 unique icons, so it’s only 6kb each loading them from the server, but inline you’ll have 300kb of SVG icons
    - DangerousPie 6y ago
      You can use an "SVG sprite" with <use>. No need to inline the SVG every time.
      - tobyhinloopen 6y ago
        Oh? I have to look that up
        DangerousPie 6y ago
        Took me a while to figure it all out, but it works surprisingly well. I have been using https://icomoon.io/ https://icomoon.io/ to generate the sprites. They also provide a JS polyfill to support IE.

wgx 6y ago

I have Google Fonts blocked in uBlock Origin now, and it's really helped pages load quicker and feel more snappy. I added these lines to uBlock: fonts.gstatic.com fonts.googleapis.com Occasionally some icons break on a few sites, but mostly it's plain sailing.

Jach 6y ago
Something I still find hilarious is that after a product I worked on started to enforce a content security policy, the #1 blocked source was always for google font resources. Of course users could whitelist the domains, but many didn't and anyway their sites looked fine.
matkoniecz 6y ago
Is it supposed to be added to "My filters" tab in settings?
- wgx 6y ago
  Yep, just add those lines in there and save.
mnadkvlb 6y ago
would something like that also work on a pihole ? that would be perfect for the other devices too that dont have possibility to use ublock thanks
- wgx 6y ago
  Yes - you can block domains at the network-level with a pihole.
Shadonototro 6y ago
the problem aren't the fonts, the problem is the developpers who made the websites with shitty performance this font is quite small

rafaelturk 6y ago

Seriusly if you care just a little for your users Dont use this! Use SVGs.

a1o 6y ago

Whenever Google makes something too easy to use for development I get a feeling they are moving on from it - in this case Material.

_nalply 6y ago
Because it's not a distinguishing factor anymore, so let's give it to the masses.
joshgoldman 6y ago
And moving towards what?

mortenjorck 6y ago

This will probably end up left unfinished like Google Fonts’ variable font support. I don’t understand how they commission high-quality fonts from professional foundries, then turn around and neuter them in the Google Fonts UI – take a look at the family called Commissioner: https://fonts.google.com/specimen/Commissioner https://fonts.google.com/specimen/Commissioner Can you tell from this page that the font contains italics? Or that it has a semi-serif flared-terminal variant? These are additional axes that simply aren’t supported, so there’s no way to know they exist unless you visit the foundry’s GitHub page.

rememberlenny 6y ago
They are actively working on this. I worked on Google Fonts, and you’d be incredibly surprised how few people run the entire service. If I recall correctly, ether ratio is something like one Google Fonts team member is responsible for the equivalent opt hundreds of millions of requests a day. The main focus they had in the variable fonts roll out was making the internet faster. The process of choosing when to/not serve variable fonts behind the scenes was oriented around the font-weight axis, so they could reduce the number of requests, and hence speed up everything from Google searches to YouTube and every other website using Google Fonts. Sadly the UX around displaying axes isn’t straight forward. Since the Google Fonts wants to setup a conservative interface, that doesn’t result in users requesting an entire variable axes with every request, especially when it’s not being used - there needed to be more work than just showing the font’s design space on a specimen page. There is an incredible amount of behind the scenes effort from an incredibly talented team. Huge props to each of them.

jokoon 6y ago

How do I download the png? The PNG are all in several subfolders...

emarthinsen 6y ago

Interesting that they have icons for "nordic walking" and "electric rickshaw", but nothing for twitter or a tweet.

Macha 6y ago
Seems pretty clear they're avoiding icons that specifically reference 3rd party brands. What would a generic icon for a tweet be that differs from a "message" icon?
- emarthinsen 6y ago
  Maybe. They have a Facebook one and a few for some other social platforms. I'm not sure why there isn't one for Twitter and GitHub. I'm not saying there is any strategy going on, it's just interesting to see what is and isn't included in icon sets.

ChrisArchitect 6y ago

Announcement blog post: https://material.io/blog/google-fonts-material-icons https://material.io/blog/google-fonts-material-icons

viktorcode 6y ago

This looks like it was created for Android app developers. Having a single set of most used icons across different apps improves consistency, which will be welcomed by the users.

artur_makly 6y ago

Seems like someone should launch an open-source pro-WCAG icon set ;-)

Phillips126 6y ago

For ReactJS developers, this is always my go-to: https://react-icons.github.io/react-icons https://react-icons.github.io/react-icons Tons of SVG icons from popular packs and using ES6 imports, you only bundle the icons you use.

crazygringo 6y ago

Wow. I wonder what this means for the future of Font Awesome. I know plenty of people are anti-Google, and also prefer SVG's over icon fonts for valid reasons (though you can download these as SVG's as well). But now that this is easier to embed than Font Awesome, has basically the same number/range of icons as Font Awesome's free tier, doesn't come with the 10K pageviews/mo. restriction that Font Awesome's free tier comes with, and so many sites already use Google Fonts for their display and/or body text... ...I'd be very surprised if this doesn't quickly become the new de-facto standard icon font.

bredren 6y ago
Font Awesome’s product has long been destined for commoditization. Which is probably why they have diversified to offering custom icons and other differentiating behavior. I suspect google won’t be the only one to offer icon sets like this, so in general I agree this will continue to erode FA’s market share. Fwiw, It has felt like FA’s most recent release fell far behind schedule.

deleted 6y ago

[deleted]

vagab0nd 6y ago

Google Fonts used to have this great feature where I can select a number of fonts and view them all on a single page. It was super useful because I can type in any text and preview the text in these selected fonts. However, I can't seem to find this feature any more. Right now if I select fonts, they just show up in the sidebar. But I can preview them in any way. There's gotta be something that I missed?

crazygringo 6y ago
It still totally works that way on Google Fonts homepage, nothing has changed. The icons page is just a separate page that works differently from the rest of the fonts.
tomasroggero 6y ago
After you selected a few, you can review your selection in the Share page. For example, https://fonts.google.com/share?selection.family=Akaya%20Telivigala%7CRoboto:wght@100;400 https://fonts.google.com/share?selection.family=Akaya%20Teli...
- vagab0nd 6y ago
  Wow, thank you! Why in the hell would they hide such a useful feature?

reaperducer 6y ago

I like that the SVGs are available under the Apache license. Because of that, I may actually get some use out of these. Does anyone know if Apple's SF Symbols are available under a similar license? I looked at Apple's web site, and it only mentions not using them in trademarks.

hundchenkatze 6y ago
I don't think you're allowed to redistribute them. Apple considers them system-provided assets, so you can only use them on systems that provide them. > Availability of individual symbols and features varies based on the version of the system you’re targeting. When you export a symbol introduced in SF Symbols 2 as an SVG template and bundle it with your app, you can use it in apps that target iOS 13, Mac Catalyst 13, tvOS 13, or watchOS 6 > All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/ https://developer.apple.com/design/human-interface-guideline... Link to the sdk terms: https://developer.apple.com/terms/ https://developer.apple.com/terms/

systemvoltage 6y ago

I am sorry but I am going to be that guy. Iconography has regressed so much, it's all the same optically to me. Designers keep pushing minimalism and line-graphics to "reduce crud" like its some sort of a religion. We can't distinguish icons well. There is no effort put into making them more unique and recognizable. What a horrible cult. Check out these glorious past remnants that we've forgotten about, they were so uhhh iconic : http://www.famfamfam.com/lab/icons/ http://www.famfamfam.com/lab/icons/ We love to see someone take Fam Fam Fam icons and create SVG versions of them. Iconography takes time and effort and enormous amount of patience, skill. You can't do this in a week in illustrator which is how it seems most icons are designed today. We've become lazy, want free stuff and no one is incentivized to spend 2 years creating amazing icons. The market for paid icons doesn't exist and we've done this to ourselves because we're addicted to free stuff. Google services icons? All impossible to tell apart now. Apple macOS dock? They use to be different shapes and sizes, now they are all chicklet squares in macOS Big Sur. Apple fired the guy (Forstall) that was the brilliant mind behind Apple's approach to UI way back in 2013. Since then, Apple UI design sucks. It is all getting worse, day by day, icon by icon. Iconography was a discipline people took seriously before 2010's. Windows 95, 98, XP icons were so amazing. They thought deeply about it. No one gives a shit anymore.

JKCalhoun 6y ago
Minimalism has a place — esp. with reduced screen real-estate. An icon I would display in my tool bar or on a button is different than an icon I would display on the desktop. My beef with Google's icons is the seeming random decision to use rounded miters on some art, sharp miters on others. Very mish-mash.
- systemvoltage 6y ago
  > reduced screen real-estate Don't get me started on how much space we waste on any UI these days. Apart from HN UI, pretty much every website and desktop app has wastage of space. I suspect, we stopped using borders - thanks to minimalism, that we need to use copious amounts of negative space to separate them. So, now paddings and margins are liberally applied everywhere.

avipars 6y ago

i use font awesome and material design icons daily!

tonoto 6y ago

All those icons and no icon for +1 ?

sandreas 6y ago

Sounds a bit like MAUI* for dotnet... I'm very skeptical about one framework / project to solve UI problems on all common platforms but it is nice to see, that there is effort to improve the developer experience in more than one language. * https://github.com/dotnet/maui https://github.com/dotnet/maui

stevewillows 6y ago

I really wish they'd bring these in for Google Sheets, too. There are times where I want to sex up a sheet but don't want to bring in external images.

avereveard 6y ago

this looks like it's very early beta. lots of the outlined icon are filled, and lots of the icon change shape proportions dramatically between the different kind, say, filled and rounded, making it impossible to use the stiles together like you could with font awesome