1 Answer, 1 is accepted
Hi Bohaso,
Indeed the SVGIcon component support icons only from type SVGIcon. That is why currently the developer can show any custom SVGs by passing a custom object from type SVGIcon to the icon property of the widget, containing the svg path as content:
@Component({
selector: "app-root",
template: `
<kendo-svg-icon
[icon]="customIcon"
></kendo-svg-icon>
`,
})
export class AppComponent {
customIcon: SVGIcon = {
name: "light",
content:
'<path ... />,
viewBox: "0 0 512 512",
};
}
I hope this helps.
Regards,
Martin
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hi Martin
I am trying to add my own SVG to be rendered but I get erros at vsCode
Can you please tell me how to add a custom SVG?
Many thanks
Please have a look:
Hi Alexis,
In order to provide a multiline string in TypeScript, use backticks (``) instead, like:
public headerLogo: SVGIcon = {
name: 'headerLogo',
path: `<svg ....>`
}
Regards
Since you made svgIcons mandatory I have existing svgIcons that I now need to incorporate to the UI since they can't be passed as icons anymore. Kendo refuses to render them. However my icons are in files in a separate directory not inside the Kendo library.
I don't want to declare each icon in the code like Alexis did even if my icons are MUCH simpler.
How can I pass a file to the SVGIcon Object of Kendo's library?
Hi Luc,
Thank you very much for the details provided.
From what I understand from your question, you are looking for an approach that would allow you to provide paths to files to the default SVGIcon interface and thus display custom SVG icons in the application. Please, correct me if I misunderstood you.
I am afraid that as of now there is no built-in approach in our API that would allow the developer to achieve the desired way of displaying custom SVG icons in the application.
The good news is that in our Feedback Portal, there is an open feature request for a similar functionality:
https://feedback.telerik.com/kendo-angular-ui/1613228-custom-svg-icon-from-assets
I upvoted it on your behalf as this would increase its popularity and will thus be considered for implementation by our development team.
I hope the provided information helps. Please, let me know if I am missing out on something.
Georgi
Progress Telerik
Thank you. This functionnality existed prior to Kendo forcing the use of scgIcons in its controls instead of regular icons. In the previous versions the icons parameter could accept a path the the existing image file.
I ended up doing this to use my own svgIcons which is a poor implementation IMO:
** DrawerRoutingItem is an extension of DrawerItem
Hi Luc,
Thank you very much for the clarifications provided.
I completely understand that this might not be the ideal approach for providing custom SVG icons to the built-in SVGIcon interface in the specific project, but I can confirm that this is indeed the supported and recommended way for rendering custom SVG icons as of now.
I would also like to assure you that our team will keep track of the customer demand for the desired feature and once its popularity increases, our development team will consider its implementation. For this reason, what I would suggest would be to subscribe to the feature request in our Feedback Portal as this would allow you to receive updates once its status changes.
Furthermore, I would also like to mention that the developer could still utilize the font icons in the project with a few additional modifications:
https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings/#toc-using-font-icons
I hope the provided information helps. Please, let me know if I am missing out on something.
Regards,Georgi
Progress Telerik