FileMaker tips, techniques, and news.

By Emory Brown  Posted on  August 4th, 2015  in  FileMaker

FileMaker Custom Button Icons

FileMaker 14 ushered in a new era of vector graphics with the advent of button icons. FileMaker comes pre-loaded with 140 very useful glyphs; additionally you can expand your collection with any number of custom glyphs and images. These icons can then be added to any button or popover button.

The default button icons in FileMaker are in SVG format. An SVG is an XML-based image that renders based on a series of mathematical formulas, and thus can be scaled without pixilation and recolored with ease. They can even be modified in a text-editor. This is different from any raster-based image, such as PNGs.

Let’s take a look at how to add custom icons to a solution, and then dive into configuring custom SVGs for FileMaker.

Adding a Custom Icon to a File

FileMaker Add IconButton Icons can be added via the button setup dialog. For information on how to use this dialog as well as the properties of button icons, reference my other article on the basics of button icons. Note that button icons are saved in the FileMaker file.

To add your own button icon, simply press the plus button below the custom icon display. Follow the file selection dialog to your desired image.

FileMaker will allow you to select either an SVG or a PNG. If you choose a PNG, there is no way to edit the image within FileMaker, since it is a raster-based image. If you select an SVG, it must be formatted correctly in order to fully integrate with FileMaker’s inspector and allow for color to be updated.

Let's see how that is accomplished.

Formatting an SVG for FileMaker

Any SVG without a specified fill color within the XML will be modifiable with FileMaker. The only caveat to this is that it will show up as grey in the button setup dialog, rather than the default white. An SVG with a fill color specified must also have “class=fm_fill” inside the <svg> tag in order for FileMaker to correctly classify and modify the color property, otherwise it will always be said fill color. Place this property directly following all <fill> properties within the XML.FileMaker Fill vs No Fill

Let’s look at some examples. Here we have the XML code for our “contact add” custom icon. It has a preset fill of white (#FFFFFF) on each of its components. This icon will always render white in FileMaker, regardless of styles placed on the glyph.

FileMaker Code Just Fill

The first option we have is to remove the fill completely. This will allow FileMaker to override the fill with settings in the inspector, however it will show up in our button setup dialog as a shadow:

FileMaker No Format

Our second option is adding both a fill of white and a class of “fm_fill”. This will result in a white icon in the button setup, as well as allow settings and styles from the inspector to update the color of the glyph:

FileMaker Correct Format

If you do not wish to deal with the nitty-gritties of SVG modification or don’t have the time or inclination to create your own, there are several useful third-party tools available from the FileMaker community that can do these tasks for you.

DataManix SVG Helper Tool

The SVG Gallery Tool from DataManix is a useful little tool when it comes to managing large numbers of custom icons. It is a FileMaker solution that is free to use. Not only does it have a database you can insert all of your images into, with a single click it can update an entire folder full of SVGs to contain the correct class to integrate fully with FileMaker.

inDats Icon Manager

If you need icon imagery that are outside of what the native glyphs can offer, inDats Icon Manger is the FileMaker solution for you. This tool has a library of over 4,000 SVGs, which are categorized and indexed for quick searching. Not only that, but the file allows you to modify the SVG before exporting for use in your own solutions. All of these great features and more are available free of charge.

FileMaker inDats Icon Manager

Summary

Button Icons are a great addition to FileMaker 14, and custom glyphs can allow for more modern solutions than ever before. Integrating your own SVGs is a simple process that can be enhanced by powerful tools from the FileMaker community.

Emory Brown thumbnail
Emory Brown

Emory is a Certified FileMaker Developer and former DB Services employee.

FileMaker 18 Certified Developer
FileMaker 17 Certified Developer
FileMaker 16 Certified Developer
FileMaker 15 Certified Developer
FileMaker 14 Certified Developer
FileMaker 13 Certified Developer
FileMaker 12 Certified Developer
FileMaker 11 Certified Developer
"We were actually able to add more features than we thought would be possible within our budget. We always experienced a ‘can do’ attitude and DB Services was incredibly patient and easy to work with."
Courtney Hartman
Art Director
"The new FileMaker custom website interface is very user-friendly and easy to follow for our clients. In addition, it is much faster than the old Instant Web Publishing (IWP) interface. Thank you and all the others who have helped us out at DB Services. I am very grateful for the excellent service you provide us. Its nice to know we can call you for help if we have an issue."
Wayne Capek
President
"We needed a solution that would simplify the administration of our responsibilities under our contract with the State of Indiana. We have seen a dramatic increase across the state in the number of potential foster and adoptive parents that have begun the preparation and training process. This increase has resulted in a significant opportunity for children available for adoption. That’s a big win for everyone! And it’s all because we can refer potential parents to the proper state contacts efficiently and quickly."
Chris Morrison
Executive Director
"Thank you for all of your expertise and valuable help. I am so grateful to have found DB Services."
Linda Findlay
Owner
"Thank you for our new database system. We transitioned from a carbon copy paper based system to a digital database. The software has saved us time and money. We used to archive all our jobs in cabinets, now we can look up a job in seconds from anywhere. The software allows us to easily email estimates to our customers in pdf format. In a year there was a return on investment just from eliminating the purchasing of our carbon forms."
Todd Cartmel
Owner
"The new system allows us to create and track jobs for customers along with inventory, something we had been doing with separate word and spreadsheet files. Because it’s now so intuitive, new staff members are able to begin using the database immediately without our usual training session and ‘cheat sheets’ for getting around within the file."
Tom Andrews
President