Fix Missing AI-Powered Insight Icon
Environment
| Area | HTML5-based Report Viewers |
| Version | 19.2.25.1001+ |
Description
In the HTML5-based Report Viewers' toolbar, the AI-Powered Insight icon may not display correctly when using the Kendo UI Classic theme and font icons. This happens because the icon source is different from the other toolbar icons. The AI icon is sourced from Content/kendo/font-icons/index.css, while the other icons are loaded from api/reports/resources/font/fonticons-19.2.25.1001.css. This mismatch causes the browser to fail to render the AI icon.
Solution
To resolve the missing AI-Powered Insight icon issue, follow these steps:
Solution 1
Download the Kendo font icons (kendo-font-icons.ttf) from Font Icons in the Telerik and Kendo UI Design System and add them to your project. Create a custom @font-face definition in your CSS file:
@font-face {
font-family: 'KendoIcons';
src: url("../Resources/kendo-font-icons.ttf");
font-weight: normal;
font-style: normal;
}
.k-i-sparkles:before {
font-family: 'KendoIcons';
content: "\e088";
}
Solution 2
Override the AI icon class in your custom CSS file. Use the following code to map the AI icon to a similar icon from the loaded font:
.k-i-ai-prompt::before {
content: "\e900"; /* Use the Unicode of a similar icon from your loaded font */
font-family: 'FontIcons'; /* Match your loaded font family */
}
Solution 3
Embed the SVG of the AI icon directly in your CSS with the following syntax:
.k-svg-i-sparkles::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='m320 32 54.3 137.7L512 224l-137.7 54.3L320 416l-54.3-137.7L128 224l137.7-54.3zM94 350 0 384l94 34 34 94 34-94 94-34-94-34-34-94zM70.6 70.6 0 96l70.5 25.5L96 192l25.5-70.5L192 96l-70.5-25.5L96 0 70.5 70.5Z'></path></svg>");
background-size: contain;
background-repeat: no-repeat;
}