Adding Tabler Icons to Qlik Dashboards
Qlik doesn’t really allow for icons. When creating dashboards in Qlik Cloud, it can be very helpful to add icons to spruce up KPIs, titles, and tables. There are hundreds of use cases for adding some visual flair using icons, but it can be cumbersome to add icons to objects in Qlik because there are very few built-in icon options.
So, how can we go about adding some icons to our dashboards in an easy and expressive way?
We can use a font! But wait, we’re talking about icons, not text. So how will a font help us?
It turns out that fonts can pack in far more than just standard characters like letters, numbers, and punctuation. One example of a “supercharged” font is Tabler Icons
Tabler Icons is an open source project that bundles thousands of beautiful icons into multiple formats that you can use freely in your web projects. One such format is a webfont, specifically .tff which is a TrueType font type.
Create a new or open an existing Qlik theme.
If you don’t already have a custom theme to add this font to, go ahead and create one based on the instructions laid out on the Qlik Help website. You can also look online for a Qlik theme generator to help get you started.
How can we use this font in Qlik?
We’ll add it to a custom Qlik theme and choose icons in our dashboard using variable expansion with a parameter.
Don’t worry if this doesn’t quite make sense yet! Let’s go through each step now.
Steps to set up
Download Tabler Icon webfont.
– We can find the tabler-icons.ttf font file in the Tabler Icons Webfont package on the NPM website:
– We can download the font file directly from here: https://cdn.jsdelivr.net/npm/@tabler/icons-webfont/dist/fonts/tabler-icons.ttf
Create a new or open an existing Qlik theme.
– If you don’t already have a custom theme to add this font to, go ahead and create one based on the instructions laid out on the Qlik Help website. You can also look online for a Qlik theme generator to help get you started.
Add tabler-icons.ttf to the Qlik theme folder.
– Move the tabler-icons.ttf file to your custom Qlik theme folder. It should look similar to this:
Add @font-face to the theme CSS file.
– Open your theme’s .css file and add this snippet at the top:
@font-face {
font-family: “Tabler Icons”;
src: url(“tabler-icons.ttf”) format(“truetype”);
font-weight: normal;
font-style: normal;
}
– Save and close the file.
Add or modify the fontFamily property in the theme JSON file:
– Open your theme’s .json file and add this snippet near the top:
“fontFamily”: “Open Sans, Tabler Icons, sans-serif”
– Here’s an example of what it should look like:
ℹ️ Note that in our screenshot above, my snippet includes the Open Sans font, as I want for that to be the primary font for normal characters like letters and numbers. You can replace that with any of the default Qlik Cloud font options:
Upload file to Qlik Cloud or Qlik Sense Client-Managed.
– To add your custom theme to Qlik, you must first save the theme folder as a ZIP file.
– How to upload your theme to Qlik Cloud
– You can follow this Qlik Help page guide on how to upload your theme ZIP file to Qlik Cloud.
– After uploading the theme ZIP file, you should see the theme in the Admin Console:
– How to upload your theme to Client-Managed
You can follow this Qlik Help page guide on how to upload your theme ZIP file to Qlik Sense Client-Managed.
How to use icons in a dashboard
Go to https://tabler.io/icons and search for the icon you want.
Search for “bar chart” and click on the first icon in the results:
In the box that appears, click on the hex value to copy it:
Go to the app Sheet view and switch the app theme to use our uploaded theme.
In your Qlik app, select any Qlik object, and then choose an expression property.
For example, you can create or select a bar chart object and then open the expression editor for the Title expression.
In the property’s expression editor, we’ll use dollar-sign expansion with our GetTablerIcon variable and use the our copied Tabler Icon hex code as the parameter.
– Make this the expression: =$(GetTablerIcon(ea59)) & ‘ Sales by County’.
– Then select the Apply button to save that.
You should now see your icon in the chart title!
If your icon doesn’t appear or you see a placeholder character in the chart title where our icon should be, you probably just need to update the font property.
– To do this, go to the chart styling tab:
– Find the font property we want to change (Title in this example) and then choose the option that includes Tabler Icons:
ℹ️ Note that if you want to “pair” the Tabler Icons font with a primary font that regular characters will use, refer back to step 5.
Summary
You should now be able to use Tabler Icons anywhere in a Qlik dashboard that supports text expressions and changing the font! That should get you very far.
Try changing the font color and size to see how the icons scale very well and can be recolored just like text.
