GitHub user VasilijeBursac edited a comment on the discussion: Using Superset’s internal icon set (or any other icon set) in custom HTML/CSS (table visualizations, dashboard templates)?
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](https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-svg/svg). You can browse icons via [Ant Design's documentation](https://ant.design/components/icon), 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 <svg> 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 <head> 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 GitHub link: https://github.com/apache/superset/discussions/35275#discussioncomment-14608348 ---- This is an automatically sent email for [email protected]. To unsubscribe, please send an email to: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
