Could i add my own icon List

1 Answer 386 Views
Icon SVGIcon
bahaso
Top achievements
Rank 1
Iron
Iron
Iron
bahaso asked on 06 Jul 2021, 07:38 AM

Hi

Could i add my own icon list ou SVG list ?

 

Regards

1 Answer, 1 is accepted

Sort by
0
Martin Bechev
Telerik team
answered on 09 Jul 2021, 04:22 AM

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.

Alexis
Top achievements
Rank 1
commented on 10 Feb 2023, 05:48 PM | edited

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:

Martin Bechev
Telerik team
commented on 15 Feb 2023, 10:21 AM

Hi Alexis,

In order to provide a multiline string in TypeScript, use backticks (``) instead, like:

public headerLogo: SVGIcon = {
    name: 'headerLogo',
    path: `<svg ....>`
}
 

Regards

Alexis
Top achievements
Rank 1
commented on 15 Feb 2023, 12:37 PM

Thank you it worked perfectly!
Luc
Top achievements
Rank 1
commented on 08 Dec 2023, 01:20 PM | edited

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?

Georgi
Telerik team
commented on 13 Dec 2023, 01:00 PM

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.

Regards,
Georgi
Progress Telerik
Luc
Top achievements
Rank 1
commented on 13 Dec 2023, 01:17 PM | edited

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

Georgi
Telerik team
commented on 18 Dec 2023, 11:44 AM

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
Tags
Icon SVGIcon
Asked by
bahaso
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Martin Bechev
Telerik team
Share this question
or