Log in
Hot & Trending on FMT

FileMaker Custom Button Icons

Featured 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 40,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

Emory Brown

DBServices

Customized Around You. Every organization is unique and, in turn, needs a database system to support your unique processes. However, organizations oftentimes use off-the-shelf software that forces you into  adjusting your workflow to fit the program's one-size-fits-all system design. Other times, businesses use a mix of spreadsheets, email, paper files, and accounting software that eventually leads to a lack of transparency and redundancies that becomes difficult to manage as an organization grows.

What we do differently is we design and create your system around you. You will emerge with a faster, more efficient, scalable database that runs smoothly and provides a platform for future business process improvement. Your database solution will become a value-adding asset that is an integral part of your organization.

Website: www.dbservices.com