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.​​

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.

• Move the tabler-icons.ttf file to your custom Qlik theme folder. It should look similar to this:

• 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.

• 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:

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.
• Open a Qlik app and add this Qlik script to the Data Load Editor in the Main section:
  Set GetTablerIcon = Chr(Num#(‘$1’, ‘(hex)’));

• Your Main script should look like this:

• 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.

• For example, you can create or select a bar chart object and then open the expression editor for the Title expression.

• Make this the expression:

  =$(GetTablerIcon(ea59)) & ' Sales by County'

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:

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.