search

petergng / material-icon-font

Material design icon styles (baseline, outline, round, sharp) built into font weights.
https://peter.ng/material-icons
Apache License 2.0
38 stars 4 forks source link

some svgs turn into black box #2

Open petergng opened 5 years ago

petergng commented 5 years ago

looks like i may not be reading clipping path correctly

MarcusCalidus commented 5 years ago

Hi Peter,

unfortunately that is a shortfall of svg2ttf or the fontello project for that part. I tried the erroneous Outline lock.svg glyph at fontello.com. It displays an error hinting to solutions here: https://github.com/fontello/fontello/wiki/How-to-use-custom-images#importing-svg-images But none of the suggested solutions worked. http://www.glyphrstudio.com/online/ also displays an error. Seems that certain features the icons use in their path attribute are not supported in ttf. At the moment I am not yet sure what to do about that.

Cheers Marco

geiras commented 5 years ago

Also happens with the "star" icon when using Rounded style.

0xF48 commented 5 years ago

yea.. maybe go in and manually edit the blanks in a font editor or something

petergng commented 5 years ago

Yea i've dealt with this problem before, if someone is down to identify all of them i can fix them in illustrator

geiras commented 5 years ago

TLDR: Created a Figma file, identified all the icons needing a fix using comments on Figma file, opened the same file on the browser, isolated the comments section in HTML, converted to plain text, deleted unnecessary text. List below.

--

I created a Figma file where I loaded all of the icons from the four variants to easily identify the black boxes. https://www.figma.com/file/0HPZjnC9OUwUtjzlBmNmiqp6/Material-Design-Icon-Font-Fix?node-id=0%3A1

I gave it a go and found 32 icons that need fixing. I don't know if I missed some icons, so if anyone wants to take a look, would be nice.

From the moment I had all the missing icons on the Figma comments file, I opened the file on the browser, fired up DevTools and I got the HTML from the comments section. Converted that HTML to text so I could remove all the unecessary code. From there, I just went throught the list and deleted everything not being an icon text.

Here's the list that I got:

web - Sharp web - Outline

surround_sound - Sharp surround_sound - Outline

star - Sharp star - Round star - Outline

replay - Sharp replay - Outline

queue_music - Sharp queue_music - Outline

pause_circle_filled - Sharp pause_circle_filled - Outline

mic_off - Sharp mic_off - Outline

mic_none - Sharp mic_none - Outline

mic - Sharp mic - Outline

lock_outline - Sharp lock_outline - Round lock_outline - Outline

lock - Sharp lock - Round lock - Outline

input - Round

forward_10 - Sharp forward_10 - Outline

fast_forward - Sharp fast_forward - Outline

airplay - Sharp airplay - Outline

geiras commented 5 years ago

@petergng, how do you fix those in Illustrator so there are no black boxes? Is there a better solution to use Material Design on Figma/Sketch/XD?

petergng commented 5 years ago

O damn this is amazing! this is super helpful, let me try to get at this issue in the next couple weeks.

geiras commented 5 years ago

Amazing is what you have done with the fonts. Thank you so much for doing Google's work.

If you tell me how to fix those black boxes in Illustrator I can help with that.

petergng commented 5 years ago

ok, so unfortunately this seems like an issue with some of google's provided svgs which have a black box around them: download the sharp version of "web" and you can see the svg renders as a black box. https://material.io/tools/icons/?search=web&icon=web&style=sharp

The path here would be to redraw source, or i parse out the box they have hoping it's the culprit for everyone...

petergng commented 5 years ago

@geiras can i get access to the figma file? we need to just edit the source by outlining and then removing the outer border and re-exporting the svgs image

geiras commented 5 years ago

I think you already got access to the Figma file, right? If you don't, just use this link and make a copy of the file, if you wish to edit...

petergng commented 5 years ago

Yup, i've highlighted all the messed up ones. If you can help run through and create fixed source for them that can be exported as svg i can re-run the generator. Here's the source i fixed up: https://www.figma.com/file/XgYwTUBgjClPBrQHMbgDvP/Material-Design-Icon-Font-Fix-Source-pn?node-id=0%3A1

geiras commented 5 years ago

I've removed the black boxes from all the highlighted icons on that file. But, as the outlined version was created out of a single text box, the icons are on the same vector shape, making it impossible to export without cutting and pasting the isolated icon.

Given that, I've marked with a green box all the icons that are already isolated and marked with an orange box all the icons that still need to be isolated.

And then there are the missing icons that I'll try to add later, by downloading the original svg source files from Google.

geiras commented 5 years ago

Do you need the new fixed versions of SVGs to have the 24x24px bounding box?

petergng commented 5 years ago

Yup 24x24 with the same file names!

On Tue, May 28, 2019 at 1:47 AM geiras notifications@github.com wrote:

Do you need the new fixed versions of SVGs to have the 24x24px bounding box?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/petergng/material-icon-font/issues/2?email_source=notifications&email_token=AAIXLYGZTAALMMWFQHYH3XLPXTWSFA5CNFSM4GGRPOZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWLNLGI#issuecomment-496424345, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIXLYDZLTT2LAJ675MFPQLPXTWSFANCNFSM4GGRPOZQ .

-- Peter Ng

geiras commented 5 years ago

Can you confirm that the attached example file would attend those needs? I opened one of the faulty SVG with Illustrator, fixed the Compound Path and saved again.

Outline_star.svg.zip

petergng commented 5 years ago

That should work but i think tracking the source via figma: https://www.figma.com/file/XgYwTUBgjClPBrQHMbgDvP/Material-Design-Icon-Font-Fix-Source-pn?node-id=0%3A1 is a better idea given i think there will be a bit of trial and error and be good to have a source of truth.

geiras commented 5 years ago

The problem with the Figma is that is too slow to delete the compound paths. All icons are a single vector shape which makes everything too slow.

For me, it's easier to just find the faulty icons on the bin folder, open with Illustrator, fix it, save and close. This way I also keep the original filenames and artboard sizes.

In Figma, I would have to import the icons, make frames, rename the frames, etc. It just takes too much time compared to the AI workflow.

What do you think? Is there an easier way?

petergng commented 5 years ago

ahh ok, that should be fine, can you dump the files to me when you're done?

Peter Ng

On Tue, Jun 4, 2019 at 2:20 AM geiras notifications@github.com wrote:

The problem with the Figma is that is too slow to delete the compound paths. All icons are a single vector shape which make everything too slow.

For me it's easier to just find the faulty icons on the bin folder, open with Illustrator, fix it, save and close.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/petergng/material-icon-font/issues/2?email_source=notifications&email_token=AAIXLYBZAGG6BKGDZ7PAYMTPYYXXLA5CNFSM4GGRPOZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODW36ZQY#issuecomment-498592963, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIXLYFLZKXPCM2NVEY3GFDPYYXXLANCNFSM4GGRPOZQ .

geiras commented 5 years ago

Hey... Here is a folder with the fixed version of all of the black box icons identified on the Figma file. I preserved the original filenames and folder structure.

Can you take a look and tell me if it works? bin_fixed.zip

geiras commented 5 years ago

Also, created a pen for the chunks of missing icons. Some are available, others don't.

I can generate a PDF from this Codepen and create SVG versions for those that exist. https://codepen.io/anon/pen/arxRpv?editors=1000

JxnGraphix commented 5 years ago

@petergng is there a solution for the "black box icons"?

geiras commented 5 years ago

I've done "my part" as a designer. I've provided the fixed versions of all SVGs that had the black boxes. Now, on to someone who understands code better than me and can fix it for good.

I'm still here if anybody needs anything else from a designer. Currently, I'm using https://materialdesignicons.com since it has way more icons than what Google provides.

JxnGraphix commented 5 years ago

@geiras no worries. I was asking @petergng.

I've tried working with materialdesignicons.com but I need something that will integrate with XD. Adding SVGs to every component/layout/artboard is labor intensive. Fontawesome offers a font to install and icons appear by selecting the font. They all seem to work without the "black box" issue. Looking for the same solution with Material.io icons.

Not sure what it takes to add the repaired SVGs you provided and compile a new font file...just trying to get there.

petergng commented 5 years ago

fortunately it seems like they've updated their hosted font css here: https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round|Material+Icons+Two+Tone

gonna play around with this and see if it's everything we need or at least helps out this process

JxnGraphix commented 5 years ago

@petergng did you have any luck?

petergng commented 5 years ago

i ended up finding the ttf and otfs filed here: https://github.com/petergng/material-icon-font/issues/6

Unfortunately the figma file isn't exportable for me. if someone could name them all and make it exportable as svg, it will be trivial for me to run it and regenerate. otherwise i would use the ttf's i listed above in the interim