Results 1 to 32 of 32

Thread: Google's Material Design Icon Font Widget Library for V7+ (Icon Fonts)

  1. #1
    Apprentice Level
    Join Date
    Oct 2014
    Location
    Copenhagen
    Posts
    10
    Thanks
    1
    Thanked 21 Times in 3 Posts


    My Twitter My LinkedIn

    Post Google's Material Design Icon Font Widget Library for V7+ (Icon Fonts)

    After many hours of copy and pasting, I decided to create a widget library of Google's material design icon font, similar to Paul's Font awesome library which I have been using A LOT - thanx Paul

    Anyways....here it is...I hope you guys like it.



    Download: materialIcons.rplib


    Download font file for local use
    https://github.com/google/material-d...aster/iconfont
    (Click the font file type you want (e.g. TTF) and click view raw to download it)


    The CSS link for including the font as webfonts in your project
    HTML Code:
    https://fonts.googleapis.com/icon?family=Material+Icons
    -----How to use webfonts in Axure projects
    -----1. Click Publish->Generate HTML Files...
    -----2. Click Web Fonts
    -----3. Click '+'
    -----4. Paste the above link in the 'URL' field
    ------- Done



    Note
    The naming of the icons and the sorting of them is a 1:1 match to Google's icon library. Therefore, some icons might looks the same, but are in fact different (at least in terms of unicode).

    I will work on adding additional search phrases on the icon titles in the future so they are easier to search for in Axure.

    All icons included as of Jun 29, 2015

    If you like it, please hit the thanks button
    Last edited by biofryd; 07-01-2015 at 03:58 AM.

  2. The Following 19 Users Say Thank You to biofryd For This Useful Post:

    @UX (07-30-2015), BenZackBumm (07-09-2015), BergenLarsen (11-04-2015), Deforbidden (09-17-2015), DerickMelander (03-01-2016), DongHao (08-19-2015), HansenUX (07-06-2016), jimparrillo (09-28-2015), Jonathan Axure (06-30-2015), josephxbrick (12-02-2015), kslstn (01-14-2016), Muensterberg (12-13-2016), Nofunnogum (07-01-2015), perchristian (06-30-2015), pit piano (08-07-2015), Rachel (06-29-2015), strelec (06-30-2015), thePsycho79 (07-02-2015), trillaggee (01-07-2016)

  3. #2
    Newbie Level
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts


    Like it a lot!

    How did you find the web font?
    It does not appear when searching for "material" or "icon" in https://www.google.com/fonts.

  4. #3
    Apprentice Level
    Join Date
    Oct 2014
    Location
    Copenhagen
    Posts
    10
    Thanks
    1
    Thanked 21 Times in 3 Posts


    My Twitter My LinkedIn
    Took a bit of detective work But it was easy to locate once I found their github repository

  5. #4
    Newbie Level
    Join Date
    Jun 2015
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts


    Thanks. Very useful.

  6. #5
    Sifu
    Join Date
    Sep 2013
    Location
    United Kingdom
    Posts
    1,829
    Thanks
    129
    Thanked 520 Times in 471 Posts


    I know I'm going to sound like a complete dope here, but where is the font? I tried the link and it listed a number of files, but what I was looking for wasn't obvious. I tried clicking for the ttf and then clicking 'View Raw' and the file that downloaded was blank (ttf but no glyphs). I obviously know that said file is the property of Google, not anyone here, just wondering how anyone else got the file onto their local machine to make the library work.

    I'm on Mac using OS X 10.8
    Last edited by thePsycho79; 07-13-2015 at 03:24 AM.

  7. #6
    Apprentice Level
    Join Date
    Oct 2014
    Location
    Copenhagen
    Posts
    10
    Thanks
    1
    Thanked 21 Times in 3 Posts


    My Twitter My LinkedIn
    You need to download and install the font locally for it to work....On Windows you can right click the file and select install

    For Mac you can follow this guide: How do I install fonts on my Mac? | Fontspring

  8. #7
    Sifu
    Join Date
    Sep 2013
    Location
    United Kingdom
    Posts
    1,829
    Thanks
    129
    Thanked 520 Times in 471 Posts


    I know how to install fonts on a mac.

    My issue is, like I said, when I click on the link for the ttf (By following the link in the OP), I am presented with no file, but a link to 'View Raw'. When I click on this link, a ttf file downloads automatically. This process is the same for both Mac and if I use my Windows network desktop. When I open the ttf in Windows, there are characters (Well, just a capital T, but that's something at least) but when I open the same file from the same location on OS X, no characters.

    Before anyone suggests it, I can't use Axure on Windows. I work mainly on a mac and do not have a thick client (Runs a locally installed OS, not a networked desktop from startup) PC that I can use my second Axure licensed install on, so I can't check the file with Axure on PC.

    I'm reckoning my issue is going to be one of two things.

    1) Firewall - so I can't see a file that others can. Could another user please confirm/correct this assumption based on the steps described above.

    2) The file is not mac-friendly. Has anyone else successfully got the font to install and work on a mac? If so, how?

  9. #8
    Axure Support/Admin
    Join Date
    Mar 2015
    Posts
    335
    Thanks
    21
    Thanked 77 Times in 65 Posts


    I was also tearing my hair out with this one for a while, downloading from different browsers, different operating systems, different networks, etc. It turns out... you just need to trust that it's installing. When I opened the .ttf file on my Mac, I also got a totally blank font. And when I opened up Axure RP, the font was listed simply as "M I "--I only found it by manually typing "Material Icons".

    Then, to make sure it was actually working, I added an H1 widget, set the font, and started typing "airline_seat_legroom_normal". Sure enough, the correct icon eventually showed up. It's a pretty bizarre experience.

    It looks like the Material Icons font doesn't actually contain any standard character glyphs--it's all defined by ligatures that appear with natural language, e.g. "local_laundry_service". It's totally different from something like FontAwesome, which has a standard alphabet in addition to a bunch of glyphs defined by highly specific strings.

    Try installing it and then typing some of the icon names listed here:

    https://www.google.com/design/icons/

  10. The Following 2 Users Say Thank You to Jonathan Axure For This Useful Post:

    biofryd (07-01-2015), thePsycho79 (07-02-2015)

  11. #9
    Sifu
    Join Date
    Sep 2013
    Location
    United Kingdom
    Posts
    1,829
    Thanks
    129
    Thanked 520 Times in 471 Posts


    Dear God... >_<

    Thanks Jonathan. That's working. Good to know that I'm not losing grip on technology quite yet.

    Also. Dear Google,

    Please go back and make your font better. Like FontAwesome. It is currently a huge heap of unintuitive AAAAAAGH!

    [EDIT] @biofryd - Awesome work on the library; now that I can actually see the damned thing. Stupid Google Icon Font... ;-)
    Last edited by thePsycho79; 07-02-2015 at 01:49 AM.

  12. #10
    Newbie Level
    Join Date
    Jul 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Hi - I downloaded RP file - loaded the library, when dragging the icon I get blank box. Let me preface - I'm completely new at all of these so I'm learning as I go. Appreciate any guidance. thanks

  13. #11
    Apprentice Level
    Join Date
    Oct 2014
    Location
    Copenhagen
    Posts
    10
    Thanks
    1
    Thanked 21 Times in 3 Posts


    My Twitter My LinkedIn
    Have you installed the font locally? The library is based on the actual font. If you don't have that installed on you machine, then you wont be able to see the icons.

    You can download the font here https://github.com/google/material-d...aster/iconfont -> click on e.g. the .tff file and the click "view raw", this will download the file. If you are on a windows machine, right click the font at select install. Restart Axure, and now you should be able to see the icons.

  14. The Following User Says Thank You to biofryd For This Useful Post:

    amnorena (07-21-2015)

  15. #12
    Newbie Level
    Join Date
    Jun 2014
    Location
    NJ
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts


    Thanks - I tried it and I get an error message this is not valid font. I'll keep playing around though with it...

  16. #13
    Newbie Level
    Join Date
    Dec 2015
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Hello!

    I'm trying to install the font (.TTF), but it is no working. It keeps presenting the error "not valid file"

    Name:  Untitled.png
Views: 38084
Size:  24.7 KB

    What am I missing?

    Thanks in advance!

  17. #14
    Axure Support/Admin
    Join Date
    Jul 2014
    Location
    San Diego
    Posts
    1,344
    Thanks
    85
    Thanked 204 Times in 199 Posts


    Hi gintoki,

    Given this particular error message, it seems possibly attributed more to the specific computer than the font file itself. There's really a range of possible factors, many hinging on specific security settings.

    As a test, could you try using an administrator user account on your Windows computer, to try installing and using the font from there? I'd also keep an eye out for any security tools in your environment or even from the web browsers as you download.

    Other web resources related to this specific error have suggested using some font converters to get it in a working state, too.
    Last edited by Alex Axure; 12-04-2015 at 04:25 PM.

  18. #15
    Apprentice Level
    Join Date
    May 2015
    Posts
    13
    Thanks
    0
    Thanked 4 Times in 2 Posts


    This is awesome, thank you!

  19. #16
    Apprentice Level
    Join Date
    Aug 2011
    Location
    Boston
    Posts
    63
    Thanks
    7
    Thanked 3 Times in 3 Posts


    Thank you soooooo much!

  20. #17
    Newbie Level
    Join Date
    Feb 2015
    Location
    United States
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Quote Originally Posted by thePsycho79 View Post
    Dear God... >_<

    Also. Dear Google,

    Please go back and make your font better. Like FontAwesome. It is currently a huge heap of unintuitive AAAAAAGH!
    Hey, I hope this helps everyone. I found an open source project which uses the Google Material Icons plus a whole lot more from other designers.

    https://materialdesignicons.com

    They offer local font files, svg, css, and they have a CDN. It's amazing. The best part, you can see the fonts in Font Book.

  21. #18
    Apprentice Level
    Join Date
    Jun 2014
    Location
    Berlin
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts


    My Twitter
    tl;dr: just applying the wizard style from the library to other widgets doesn't work. Why not?

    I've tried applying the widget style from the Material Icons library to existing widgets, but this causes a problem. In Firefox on localhost things look fine, but in Safari and on other devices, the icons are not displayed. It has something to do with the .material-icons CSS style that Google hosts - if I manually add it with Safari's inspector, my icon is shown. Also, when I add a widget from the library to my project, it is displayed correctly on all systems!

    So kudos for making the widgets work so well. What makes the widgets special though? Is there a way to convert the widgets that currently have FontAwesome icons into Material design icons? Replacing the existing widgets with Material Icon widgets means I'd have to change lots of interaction (and there is no easy way to find out which ones).

    Update: I just found out the following that the icons only show up in widgets that I created myself and if the widget has auto height and auto width in its properties. Strangely, if I turn of those properties of a widget dragged from the Material Icons library (by resizing the widget), this doesn't impact visibility of the icon.
    Last edited by kslstn; 01-15-2016 at 07:53 AM. Reason: added summary.

  22. #19
    Axure Support/Admin
    Join Date
    Jul 2014
    Location
    San Diego
    Posts
    1,344
    Thanks
    85
    Thanked 204 Times in 199 Posts


    Hi kslstn,

    Per our related thread, re-mapping icon fonts may be moving beyond RP's current scope at the moment. (Albeit I've seen some articles that might convey what might be needed for that kind of undertaking.) Nonetheless, regarding your update, if you could post a sample RP file that demonstrates the bug, we'd be happy to test it and use it for reference in related issues. Thanks!

  23. #20
    Newbie Level
    Join Date
    Jan 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts


    For some reason my browsers (Edge, Chrome, Firefox) will not display the material design icons even after I included the CSS link to the webfont. However, FontAwesome works just fine. I also tried manually typing in the @fontface text to no avail.

    Any suggestions?

    Name:  Capture.JPG
Views: 34674
Size:  51.2 KB

  24. #21
    Sifu
    Join Date
    Sep 2013
    Location
    United Kingdom
    Posts
    1,829
    Thanks
    129
    Thanked 520 Times in 471 Posts


    You aren't using the correct font name. Use 'Material Icons'.

  25. #22
    Newbie Level
    Join Date
    Jan 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Thanks for the tip, James. I changed the name but unfortunately it still doesn't seem to be working.

    EDIT: I just tested it once more and the icons do appear in Firefox and in Safari on my iPhone, but not in Google Chrome (desktop) or Microsoft Edge. Additionally, the icons are not in the appropriate location when viewing on my iPhone; they seem to be offset quite a bit.

  26. #23
    Sifu
    Join Date
    Sep 2013
    Location
    United Kingdom
    Posts
    1,829
    Thanks
    129
    Thanked 520 Times in 471 Posts


    I know I have issues with locally generated prototypes due to the company firewall, which are then solved by hosting the prototype on AxShare (Use a password if you need security).

    But your link is the same as the one I use and it works fine for me on all the browsers I've tested.

  27. #24
    Axure Support/Admin
    Join Date
    Jul 2014
    Location
    San Diego
    Posts
    1,344
    Thanks
    85
    Thanked 204 Times in 199 Posts


    Quote Originally Posted by drfitn3ss View Post
    Thanks for the tip, James. I changed the name but unfortunately it still doesn't seem to be working.

    EDIT: I just tested it once more and the icons do appear in Firefox and in Safari on my iPhone, but not in Google Chrome (desktop) or Microsoft Edge. Additionally, the icons are not in the appropriate location when viewing on my iPhone; they seem to be offset quite a bit.
    Hi drfitn3ss,

    That's really odd. Would you mind posting your RP file? Sounds like everything's correct; happy to look it over, though. At a later point, it may be helpful to check for any errors in Google Chrome's console tab, on your desktop. One way to access that is by right-clicking on the browser page, and selecting "Inspect" then the "Console" tab. Seeing the RP would be good to see first, though; could you share your AxShare URL, too? Thanks!

  28. #25
    Newbie Level
    Join Date
    Jan 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Thanks for looking into this, Alex! Can I send the file to you in a message? I'm not sure that I'm allowed to share publicly.

  29. #26
    Axure Support/Admin
    Join Date
    Jul 2014
    Location
    San Diego
    Posts
    1,344
    Thanks
    85
    Thanked 204 Times in 199 Posts


    Hi drfitn3ss,

    The best way would be to email us at support@axure.com with the file. Could you send that over as an attachment and include a link to this forum thread in your email body? Let me know; thanks! :)

  30. #27
    Apprentice Level
    Join Date
    Jun 2014
    Location
    Berlin
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts


    My Twitter
    Quote Originally Posted by Alex Axure View Post
    Nonetheless, regarding your update, if you could post a sample RP file that demonstrates the bug, we'd be happy to test it and use it for reference in related issues. Thanks!
    Thanks for your patience! I have finally made a test file containing different ways in which I add the icons. The example is published here on AxShare. As you can see, not all icons show up in Safari and on Android devices.

    Edit: I checked on a Windows VM without the icon font installed and found that it works correctly on Firefox, but that IE 11 only shows the first icon, like on my Android devices.
    Attached Files Attached Files

  31. #28
    Axure Support/Admin
    Join Date
    Oct 2015
    Location
    San Diego, CA
    Posts
    707
    Thanks
    10
    Thanked 133 Times in 125 Posts


    Hi kslstn,

    Thanks for providing the RP file--I'm seeing the same icon discrepancies between browsers. I'm not yet sure if this is a bug or a conflict with browser-compatibility, but I'm going to get this filed with our QA so that they can further investigate the issue.

    For now, dragging the icons from the Widget Library should help to render the icons consistently across all browsers. It also looks like version 8.0 is showing better results (for Chrome), which is definitely good news.

    Thanks for sleuthing this!

  32. The Following User Says Thank You to Jane Axure For This Useful Post:

    kslstn (02-05-2016)

  33. #29
    Newbie Level
    Join Date
    Jun 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Quote Originally Posted by Jonathan Axure View Post
    I was also tearing my hair out with this one for a while,

    https://www.google.com/design/icons/
    I followed the instructions but I cannot change the color of the icons or their dimensions/size. Is there something else that I have to do to accomplish that?

  34. #30
    Axure Support/Admin
    Join Date
    Dec 2015
    Location
    San Diego, CA
    Posts
    439
    Thanks
    13
    Thanked 87 Times in 76 Posts


    Hi acnow,

    The icons are text, so you'll want to use the Font Size dropdown to change their size and the Text Color color-picker to change their color.

  35. #31
    Apprentice Level
    Join Date
    Jun 2016
    Location
    Melbourne Australia
    Posts
    14
    Thanks
    10
    Thanked 0 Times in 0 Posts


    The arrow downward and arrow upward icons don't seem to be in the materialIcons.rplib library. I assume Google has added these since the library was created. Any chance of an update?

  36. #32
    Sifu
    Join Date
    Sep 2013
    Location
    United Kingdom
    Posts
    1,829
    Thanks
    129
    Thanked 520 Times in 471 Posts


    Already done. Check this thread - Axure 8 Material Icons library updated to version 2.2

  37. The Following User Says Thank You to thePsycho79 For This Useful Post:

    HansenUX (07-07-2016)

Similar Threads

  1. Font Awesome Widget Library for RP 8 (Icon Fonts)
    By Paul Axure in forum 7.0 Tips, Tricks, Examples
    Replies: 78
    Last Post: 08-11-2017, 11:58 AM
  2. Google's Material Design Axure Library available now!
    By radupunctcom in forum 7.0 General Discussion
    Replies: 1
    Last Post: 08-07-2015, 12:23 PM
  3. Google Material Design Icons RPLIB - Come and get it
    By lacroixcm in forum 7.0 Tips, Tricks, Examples
    Replies: 6
    Last Post: 06-19-2015, 09:59 AM
  4. Creating a custom web icon font library
    By hcho33 in forum 7.0 Newbie Questions
    Replies: 1
    Last Post: 05-14-2015, 01:21 PM
  5. Segoe UI Symbol Widget Library for V7+ (Icon Fonts) - includes RPLib and CSS file
    By BergenLarsen in forum 7.0 Tips, Tricks, Examples
    Replies: 0
    Last Post: 02-18-2015, 06:56 AM

Search Engine Friendly URLs by vBSEO 3.6.0 PL2