Custom icons in color picker

[Jaspreet]

Hi,

In the documentation https://www.telerik.com/kendo-angular-ui/components/inputs/colorpicker/custom/ , the sample is given for customizing icons using kendo icons or kendo classes.

Is there an option of using angular material icons/class with colorpicker component. 

 

Regards,

Jaspreet

[Dimiter Madjarov]

Hi Jaspreet,

Yes, this is possible to be achieved. The following example demonstrates the two options to customize the ColorPicker icon:

https://www.telerik.com/kendo-angular-ui/components/inputs/colorpicker/custom/#toc-display-an-icon-in-the-colorpicker

The icon option allows the usage of Kendo UI icons. It receives the name of the icon and the component will build the required CSS classes automatically.

The iconClass option on the other hand receives any custom CSS classes and applies them 1:1 as they are passed. It could be used to render any custom icon. Depending on the icon specifics (size, positioning etc.) some additional custom styling might be needed.

I hope this information helps.

Regards,
Dimiter Madjarov
Progress Telerik

[Jaspreet]

Hi Dimiter,

Actually we have tried both the options https://stackblitz.com/edit/angular-39unsh but none worked with angular material icons. The class and icons it picks are only from kendo.

Angular material icon used from https://fonts.google.com/icons?selected=Material+Icons:drag_indicator&icon.query=color in 4th example in stackblitz link shared. 

Regards,

Jaspreet

[Jaspreet]

Hi Dimiter,

Kindly provide some inputs to handle this scenario.

Regards,

Jaspreet

[Martin Bechev]

Hi Jaspreet,

Here is an example of a Kendo Angular ColorPicker component with [icon] property set to an icon from the list:

https://stackblitz.com/edit/angular-hdqqkw-sgfohv

And an example that utilizes [iconClass], using Material icon:

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

The codepoint for the icon was copied from the following GitHub issue comment:

https://github.com/google/material-design-icons/issues/813#issuecomment-401601344

but can be found also here:

https://github.com/google/material-design-icons/tree/master/font

Regards,

Martin

[Jaspreet]

Thank you Martin for the reply. There is still one issue that the selected color does not reflect on the icon. Though it works fine with kendo icons. 

 

Regards,

Jaspreet

 

[Martin Bechev]

Hi Jaspreet,

The used material icon in the afore-mentioned demo does not reflect selected colors by default:

But the developer can set the color of the icon, by setting the color CSS property in the custom class

.custom-icon::before {
        content: "\\e23a";
        font-family: 'Material Icons';
        color: #548235;
      }

Regards,
Martin
Progress Telerik