How to use custom SVG icons in lieu of Knack's built-in icons

API & Customization Show & Tell
1

Hello!

I recently had a need to use my own icons in lieu of the Knack icons (font awesome icon set). To be sure, the Knack set of icons is good and covers most use cases (PS: I’d love to see more of the font awesome catalog included!).

My use case is I made a simple app to help a local mountain bike trail organization. We categorize trails with green, blue, black, etc colors – if you’ve skied or biked, you’ve seen these colors and icons. They denote how difficult the trail is.

I have a field in an object called “Difficulty” which is a multi-choice field with simple values like “Green”, “Blue”, etc. I created a display rule for this field on one of pages to show an icon for each color. So for example: If “Difficulty” “is” “Green” then-> Set text color to (green, of course), and set icon to fa-circle. “fa-circle” does look approximately what I wanted for the green trail icon. BUT it’s not close enough for my liking which is the point of this post.

To give you an example of what I mean, here’s the actual trail icons:

Screen Shot 2021-09-10 at 12.50.01 PM

I employed some custom CSS to make this work – if you look on the trailforks page you’ll see all their icons are SVG which is super convenient.

I took the source of the SVG (if you look at the source it’s HTML) and base64 encoded it:

(on my Mac…)

$ cat green.svg | base64 > green.base64
$ cat green.base64 | pbcopy

FYI that last line is not necessary, it just copies the base64 value in to the Mac’s clipboard. I’m lazy so this was helpful…

From there, I wrote some custom CSS which used the base64 value of the icon inline:

.kn-table .fa-circle:before {
    display: block;
    content: ' ';
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjE...4KPC9zdmc+Cg==");
    background-size: 18px 18px;
    height: 18px;
    width: 18px;
}

Note that the “…” in the base64 value is just my way of truncating a very long value.

The trick here is to use a font awesome icon and replace it with your own. I’d suggest using some lesser-known icons as ones you replace.

Hope you find this useful!

2 Likes