Column chooser custom icon

[Cooler]

Hello. Is it possible to use custom svg icon instead default icon <kendo-grid-column-chooser>? And also can i add some text label near icon?

 

[Martin Bechev]

Hello,

Thank you for the screenshot.

In general, the default kendo icons can be replaced, using the content CSS property. For more details check the following article from our documentation:

https://www.telerik.com/kendo-angular-ui/components/styling/icons/#basic-usage

Regards,
Martin
Progress Telerik

[Dominik]

but what if we want to use svg icon from kendo svg icons? 

there is no property svgIcon like in others like buttons.

there is even no template to change visuals of column chooser

[Martin Bechev]

Hi Dominik,

In order to change SVG icon on which the developer doesn't have direct access, create a custom service that extends the IconSettingsService and override the getSvgIcon function.

@Injectable()
export class MyIconService extends IconSettingsService {

  private svgDictionary: { [key: string]: SVGIcon } = {
    'more-vertical': paperclipIcon // changes the Column Menu icon of the Grid
  };

  public getSvgIcon(svgIconName: string): SVGIcon {
    return this.svgDictionary[svgIconName] || super.getSvgIcon(svgIconName);
  }
}

For more details please check the following article:

https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings/#toc-changing-the-built-in-icons

Here is an example where the Column Menu icon of the Grid is replaced:

https://stackblitz.com/edit/angular-fcjtyu

I hope this helps.

[Dominik]

yes but this is globally overriding this icon key isn't it?

[Martin Bechev]

Hi Dominik,

Yes, this will overwrite all 'more-vertical' icons in the application.

The alternative approach is to use custom JavaScript code and replace the SVG icon in DOM with the desired SVG icon from the list. However this would be hard to maintain as the implementation would rely on query selectors and generic HTML methods.