Using Superset’s internal icon set (or any other icon set) in custom HTML/CSS (table visualizations, dashboard templates)?

[VasilijeBursac]

Hi everyone,

I'm customizing a Superset dashboard and was wondering:

Is it possible to reuse the icon package that Superset uses internally for its UI elements (e.g., icons in buttons, panels, etc.) in custom visualizations?

Specifically, I’d like to:

• Use icons inside a custom column in a Table chart by using a SQL CONCAT statement to build HTML.
• Or reference icons in custom dashboard CSS or CSS templates.

Benefits of being able to do something like this:

• Visual consistency with Superset’s built-in UI
• Keep it "on the same cost", i.e., avoid adding a separate CDN or local assets if Superset’s icon font or SVG set is already loaded.

If Superset’s icon set isn't exposed or usable directly:

• Is there a preferred way to import external icon libraries (like Font Awesome or Feather via CDN)?
• Alternatively, can we host our icon files and reference them in CSS or HTML manually?

Would love any pointers, best practices, or examples if someone’s done something similar. @mistercrunch @rusackas @msyavuz

Thanks in advance!

[dosubot[bot]]

Superset’s internal icons are implemented as React components and are not exposed as a global icon font, CSS class, or SVG sprite, so you can’t reference them directly in custom HTML or CSS for Table chart columns or dashboard templates. If you want to use icons in custom Table columns (e.g., via SQL-generated HTML), you’ll need to use external icon libraries or your own hosted icon files.

You can render HTML in Table chart cells (like <img> or <i> tags) by enabling the “Render columns in HTML format (dangerous)” option. Superset sanitizes the HTML, but allows safe tags like <img> with src attributes, so you can display icons by referencing external URLs or assets you host yourself. For example, you could use a SQL expression like:

CONCAT('<img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/star.svg" width="16"/>')

Or, if you load an icon font (like Font Awesome) via a CDN in your dashboard’s custom CSS, you can use:

CONCAT('<i class="fa fa-star"></i>')

Just make sure your custom CSS includes the relevant CDN link for the icon library, or host the icon files yourself and reference them in your HTML or CSS. There’s no built-in way to use Superset’s internal icons in this context, so using external libraries or your own assets is the recommended approach for visual consistency and flexibility [discussion].

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[VasilijeBursac]

@dosu Can you please provide an example of how to reference a self-hosted file in a CONCAT statement?

[dosubot[bot]]

Here’s an example of how to reference a self-hosted icon file (like an SVG or PNG) in a SQL CONCAT statement for a Superset Table chart cell:

CONCAT('<img src="https://your-domain.com/path/to/icon.svg" width="16" height="16"/>')

Make sure the file is publicly accessible from your Superset instance. In the Table chart, enable the “Render columns in HTML format (dangerous)” option to allow HTML rendering. Superset’s sanitizer allows <img> tags with src attributes, so this approach works for self-hosted icons as long as the URL is valid and accessible. You can adjust the width and height as needed for your layout.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[VasilijeBursac]

Here’s an example of how to reference a self-hosted icon file (like an SVG or PNG) in a SQL CONCAT statement for a Superset Table chart cell:

CONCAT('<img src="https://your-domain.com/path/to/icon.svg" width="16" height="16"/>')

Make sure the file is publicly accessible from your Superset instance. In the Table chart, enable the “Render columns in HTML format (dangerous)” option to allow HTML rendering. Superset’s sanitizer allows <img> tags with src attributes, so this approach works for self-hosted icons as long as the URL is valid and accessible. You can adjust the width and height as needed for your layout.

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other    

@dosu I meant self-hosted in the Superset instance itself. Specifically, placed in the assets folder or somewhere locally within Superset's static files.

[dosubot[bot]]

To use a self-hosted icon or image in a Superset Table chart cell, place your file (e.g., icon.svg) in the Superset static assets directory—typically superset-frontend/public/static/assets/images/. Then, reference it in your SQL using a relative URL like this:

CONCAT('<img src="/static/assets/images/icon.svg" width="16" height="16"/>')

This works as long as the file exists in that directory and your Superset instance is serving static assets correctly. If you run Superset under a subpath (like /analytics), the URL should be /analytics/static/assets/images/icon.svg depending on your deployment and proxy config (details). In development, assets are served by the frontend dev server (usually port 9000); in production, they're served by your web server or reverse proxy (details).

Make sure the “Render columns in HTML format (dangerous)” option is enabled in your Table chart. Also, check your Content Security Policy (TALISMAN_CONFIG) to ensure 'self' is allowed for img-src so images load from your own server (details).

If you see broken images, double-check that the asset is present, the path is correct, and your static files are being served as expected.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[mistercrunch]

The visualization plugins can use them for sure (importing them in javascript/react), but as far as using inside a data table along with your data, I don't think think that's possible to reference them as they get compiled as svg by webpack. You could hack and incorporate the source svg, but that wouldn't be a reference, it'd an actual copy of the svg. Not sure if we allow svg tags when sanitizing the html content in tables and elsewhere (we sanitize with an allow-list of things like , , ...). Maybe a hack with squeezing in the svg idk.

Maybe jinja hacks are possible too, so at least it's not hard-coded in each chart, through JINJA_CONTEXT_ADDONS maybe, where you'd reference copy/source of the icons there.

Can probably reference icons anywhere on the web if your TALISMAN / CORS settings allow.

[VasilijeBursac]

Thanks a lot for the clarification! I experimented with several approaches based on this discussion and wanted to share what I found in case it’s useful to others, as well as to ask a couple of remaining questions.

1. Hosting and Using Local SVG Icons (AntDesign) ✅

Hosting SVG icons locally via the assets folder works as expected.
The raw SVG files for AntDesign Icons can be found in the Ant Design icons repo. You can browse icons via Ant Design's documentation, then download the desired SVG (SVG file can be found under the same name as icon) from the first link using the “Download Raw” option.

Referencing in HTML:

• Using <img> tag works perfectly:
  <img src="/static/assets/custom/icons/search.svg" alt="Search Icon" />
• However, using directly (for styling flexibility) does not work, as you mentioned earlier. I tested this and confirmed via the browser inspector that the tag is sanitized and removed from the final HTML output.

2. Using Icons from External Sources via CDN (e.g. FontAwesome) ❌

I also attempted to use CDN-hosted icons (e.g., Font Awesome), but ran into several issues:
I updated TALISMAN_CONFIG in superset_config.py to allow the FontAwesome CDN:

TALISMAN_CONFIG = {
    "content_security_policy": {
        "default-src": ["'self'"],

        "font-src": [
            "'self'",
            "https://fonts.googleapis.com",
            "https://fonts.gstatic.com",
            "https://cdnjs.cloudflare.com",            
            "https://use.fontawesome.com",            
            "https://pro.fontawesome.com"             
        ],

        "style-src": [
            "'self'",
            "'unsafe-inline'",                          
            "https://fonts.googleapis.com",
            "https://cdnjs.cloudflare.com",             
            "https://use.fontawesome.com",              
            "https://pro.fontawesome.com"               
        ],
    }
}

The first issue is how to properly add the Font Awesome CDN link so icons can be accessed. Currently, it only makes request when the stylesheet link is manually inserted into the HTML via the browser’s inspector:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
This results in a successful 200 OK response, as can be seen in the Network tab of the browser's inspector.

Problems:
<i> tags for icons are rendered, but they appear completely empty (<i></i>), i.e. icons are not displayed.

The issue seems to stem from how Superset sanitizes or interprets these elements inside visualizations like tables.

3. Sanitization

I looked into the Superset codebase and confirmed that HTML is sanitized using nh3.
The list of allowed tags and attributes is defined in core.py. Notably:

• <svg> tag is not allowed and is stripped.
• class attribute for <i> tag also seem to be restricted.

As a test, I tried extending the allowlist (e.g., allowing svg, class attribute on <i> tag, etc.) and rebuilt Superset, but everything stayed the same as before.

Remaining Questions

1. Am I missing something in the setup or approach that prevents Font Awesome or other CDN-based icon libraries from working inside Superset (especially in tables)?
2. What is the recommended way to load external stylesheet links (like FontAwesome CDN) so that they can be used across dashboards or within visualizations? Is there a recommended entry point for injecting global styles and stylesheet links?

Thanks in advance! @mistercrunch