Material Icons Bezier Paths

Has anyone else opened up the Google's Material Icons and looked inside them?

Does anyone know of a 'cleaned up' version that is available and not so... wonky?  :s


Comments

  • Adam JagoszAdam Jagosz Posts: 689
    edited November 2019
    Icon fonts are quick and handy, but I usually go for the SVG solution. https://material.io/resources/icons/?search=help&icon=help_outline&style=baseline
    Your example is a TrueType (quadratic Bezier) export, try PostScript (cubic, .otf) if you can find any.
  • Jim ParrilloJim Parrillo Posts: 10
    edited November 2019
    OK - Thanks. Yeah - I do the same with .svg whenever possible. I've only seen the font files available as .ttf on GitHub - never seen anyone post it as .otf

    I had to create some new specialized icons for the web dev team here, and the web exports looked fine, so I'm guessing I will just have to create a fork on Github and clean them up as a long term project. Not hard - just tedious. :# 
  • Adam JagoszAdam Jagosz Posts: 689
    edited November 2019
    All I see there are SVGs (and a bunch of PNGS, XMLs... I didn't dive into all of it).
    By cleanup, do you mean conversion to PS? I don't see anything 'wonky' in the OP, just regular everyday normal TT outlines.
  • What software are you using to edit? Glyphs?
    This is how the svg is opened in Inkscape.



  • @Adam Jagosz There seem to be fonts here: https://github.com/google/material-design-icons/tree/master/iconfont

    SVG graphics can be designed with either cubic (PS style) or quadratic (TT style) curves. Opening one of the source SVG files, in this case, it see code for cubic curves.

    Although the circles are lovely in the quadratic version shown by @Jim Parrillo above (using the minimum 8 points vs the 12 in the cubics), I see how the inner curve of the question mark is ... janky. Looks kind of like something got rounded to grid during conversion, perhaps with not enough resolution.
  • I think the jankyness comes from a cubic to quadratic conversion that is not checking for the inflection point. Because that is quite difficult, it is easier to always add an explicit point at the inflection.
  • That particular glyph isn't at bad as some. Here's a slightly more heinous example (n.b. my file dates to 2015 — it may have been updated since then)


Sign In or Register to comment.