Could i add my own icon List

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