Google Material Icons Font

This forum allows developers to post programming tips and coding techniques that may be useful to other Visual LANSA developers. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
User avatar
Stewart Marshall
Posts: 412
Joined: Thu Nov 05, 2015 5:25 pm

Google Material Icons Font

Post by Stewart Marshall » Tue Oct 25, 2016 10:26 am

The Google Material Icons (https://design.google.com/icons/) can be used in browser applications by making use of the Material Icons Font.

As the icons are delivered as a font, they follow the same styling rules as all other fonts, allowing the foreground color to be changed and the font to appear in many different sizes.

The attached import contains a Webpage, Reusable part and a Widget.
Untitled.png
Untitled.png (31.6 KiB) Viewed 38690 times
The page uses a Tile control with an individual tile for each of the 900+ listed icons. The IconName property of the widget is set to the required icon name and the icon will be shown at runtime.
Attachments
GoogleIcons.zip
(22.9 KiB) Downloaded 2146 times
Stewart Marshall

Independent IT Consultant
www.marshallfloyd.com.au

User avatar
Stewart Marshall
Posts: 412
Joined: Thu Nov 05, 2015 5:25 pm

Re: Google Material Icons Font

Post by Stewart Marshall » Tue Oct 25, 2016 3:54 pm

No sooner had I posted this than I was provided with a URL and code to get the icon names from github, so here's an updated version
Attachments
GoogleIcons.zip
(17.67 KiB) Downloaded 2179 times
Stewart Marshall

Independent IT Consultant
www.marshallfloyd.com.au

soa
Posts: 269
Joined: Mon Dec 07, 2015 3:15 pm

Re: Google Material Icons Font

Post by soa » Thu Feb 02, 2017 11:41 am

I've downloaded this project but I'm having some issues. Running under debug I get as far as the line.

#GetIconNames.ExecuteAsync

In the browser it immediately displays

Fatal Error:

Failed to load /lansa/v40/xdemo_65.js?v=1485995731_dev
Reported By:

http://localhost/lansa/lansa_14_1_0_3/lansa.js, line 18

However, in the debugger the code keeps running and I can see the icon list returned and parsed out.

Any ideas?

User avatar
Stewart Marshall
Posts: 412
Joined: Thu Nov 05, 2015 5:25 pm

Re: Google Material Icons Font

Post by Stewart Marshall » Thu Feb 02, 2017 5:22 pm

Have you compiled both the WebPage and the reusable part (xDemoWebGoogleIconTileDesign)?
Stewart Marshall

Independent IT Consultant
www.marshallfloyd.com.au

soa
Posts: 269
Joined: Mon Dec 07, 2015 3:15 pm

Re: Google Material Icons Font

Post by soa » Fri Feb 03, 2017 9:58 am

You are correct, I hadn't compiled the tile design. After compiling all the RPs I still had an issue because I hadn't compiled the widget. It is now working.

There must be a better way to handle this. The error message doesn't always tell where the problem is and as only the short name is displayed it is difficult to locate the offending object. I'd like to be able to see the web pages dependencies in a single view and compile them with a single click.

MarkD
Posts: 556
Joined: Wed Dec 02, 2015 9:56 am

Re: Google Material Icons Font

Post by MarkD » Fri Feb 03, 2017 10:55 am

I find displaying the name and ID together in the IDE to be useful at times
Capture.PNG
Capture.PNG (35.16 KiB) Viewed 38510 times

soa
Posts: 269
Joined: Mon Dec 07, 2015 3:15 pm

Re: Google Material Icons Font

Post by soa » Fri Feb 03, 2017 2:25 pm

Mark

You are right but when you have a runtime error in XAAPART03 tracking that down is not easy when the full name could be nothing like it

dominique
Posts: 31
Joined: Mon May 29, 2017 4:16 pm
Location: St. Gallen, Switzerland

Re: Google Material Icons Font

Post by dominique » Tue Mar 13, 2018 5:34 pm

Hi
I tried to work with the Google Icon Fonts.

The icons are displayed locally on server:
Bild000019.jpg
Bild000019.jpg (107.27 KiB) Viewed 37664 times
...but on on a client
(IE)
ie.jpg
ie.jpg (62.47 KiB) Viewed 37664 times
(FF)
ff.jpg
ff.jpg (103.14 KiB) Viewed 37664 times

Does anybody know what I'm doing wrong?

GregSippel
Posts: 25
Joined: Thu May 19, 2016 11:34 am

Re: Google Material Icons Font

Post by GregSippel » Thu Mar 15, 2018 12:40 pm

Dominique,

I suggest first check that the browser on the machine you are using is able to load the following urls,

https://fonts.googleapis.com/icon?family=Material+Icons
https://fonts.gstatic.com/s/materialico ... DsNc.woff2

The widget used in the example provided must download these files in order to display the icons. This download is done on the client PC by browser used. If either file cannot be downloaded, you will get an effect similar to the above.

Hope this helps

dominique
Posts: 31
Joined: Mon May 29, 2017 4:16 pm
Location: St. Gallen, Switzerland

Re: Google Material Icons Font

Post by dominique » Thu Mar 15, 2018 5:21 pm

Thanks Greg

I can load both URLs without Problems.
Any other ideas?

regards
Dominique

GregSippel
Posts: 25
Joined: Thu May 19, 2016 11:34 am

Re: Google Material Icons Font

Post by GregSippel » Fri Mar 16, 2018 10:54 am

When running the VL web page, have a look at the browser console and see if you are getting any errors. The issue could be related to cross-site scripting.

Hope this helps
Greg

Post Reply