The Original FileMaker Community
Business Templates - Demo Apps - Video Tutorials -Samples - Help - 46000 Member Forum

The Leading Filemaker Developer Tools

Using Material Design Icons Demo in #FileMaker

Get real time updates directly on you device, subscribe now.

It amazes me how easily we adapt and respond to visuals. Not only is functionality important to software development, but design is also pretty important. Because time is a limited commodity, usability and intuition are important factors when encouraging users to adopt a new system. And generally, the visual elements of the system determine how quickly users are able to learn a new application. Design includes many different aspects – color, layout, fonts, sizes, etc. You have to be strategic with your design elements, including those micro-images we call icons. Those seemingly small symbols ultimately make a big impact on user navigability and comprehension.

Who else but Google has created a style guide for all of their applications and shared it on the interwebs for everyone to use. Material Design is basically a design language that Google created to unify digital interfaces and experiences. They offer lots of good UI/UX design ideas in this document and a bunch of free resources. Who doesn’t like free stuff? One of those free things is a whole set of icons, nice ones. You can browse through them here:

Let me show you how to use the icons in FileMaker Pro. From the Material Design site, you can download the icon in a variety of formats. The best format for FileMaker Pro is SVG, of course. One of my colleagues, through some research, trial and error figured out the best way to import these icons into FileMaker Pro.

Step 1: Select the icon and download it as an SVG.

Material Design icons


Step 2: Open this file up in your friendly local text editor. When you open it up, it should look like this:

How to use Material Design icons in FileMaker Pro

Step 3: Delete the line containing fill=”none”. This step is a bit tricky because the text might be in different places depending on the file. But you want to always delete the line that includes fill=”none” text. Be sure to delete the entire line.

How to use Material Design icons in FileMaker Pro

After deleting it, the file should look like this:

How to use Material Design icons in FileMaker Pro

If you’re wondering why you have to delete the line that includes the fill=“none” text, let me explain. Unlike some applications, FileMaker Pro only supports a single color icon so all the objects in the icon have to be the same color. The line you delete describes a square that is the same size as the icon itself (24×24). If we leave this line in place, it will draw a 24×24 square covering the icon, resulting in a 24×24 solid square icon in the color you choose…not that useful. Another option would be to change the size of the square so instead of “0h24v24H0z” (24×24) it would be “0h0v0H0z” (0x0), then it would just disappear.

Step 4: Import into FileMaker Pro! Create a button then navigate to the icon editing options. Click the plus (+) button to import the file you just edited.

How to use Material Design icons in FileMaker Pro

Select the file and you’re done! You should now have that fancy new icon from the omniscient Google in your FileMaker solution.

How to use Material Design icons in FileMaker Pro


Good luck! And special thanks to Matt Stanford at The Support Group for figuring this out in the first place.



This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More