material-icon-font
material-icon-font copied to clipboard
petergng
some svgs turn into black box
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
Yea i've dealt with this problem before, if someone is down to identify all of them i can fix them in illustrator
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
@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?
O damn this is amazing! this is super helpful, let me try to get at this issue in the next couple weeks.
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.
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...
@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
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...
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
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.
Do you need the new fixed versions of SVGs to have the 24x24px bounding box?
Yup 24x24 with the same file names!
On Tue, May 28, 2019 at 1:47 AM geiras [email protected] 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
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.
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.
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?
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 [email protected] 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 .
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
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
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.
@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.
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
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