Expand my Community achievements bar.

Join us in celebrating the outstanding achievement of our AEM Community Member of the Year!

not able to set coral icon to rte plugin

Avatar

Level 4

Hello everyone , I am using aemaacs local sdk. I tried to use coral icon "lightbulb" icon as rte plugin icon using tbGenerator.registerIcon(pluginname , "lightbulb"). 

 

1.why I am able to use other icons but not able to use some icons like lightbulb , fileIdea.?

2. how to use custom icon in aem rte plugin ?

 

I have seen many online sites , blogs . but not able to find answer.

3 Replies

Avatar

Community Advisor

Hi @AliSyed1 

There are a few reasons why some Coral icons may not work as expected when registered as RTE plugin icons:

  • Not all Coral icons are available in every context. Some icons may be restricted or not included in the specific version of the Coral library that AEM is using. 
  • The icons may require specific CSS classes or styles to render correctly. If the icon is not displaying, it could be missing styles or incorrect class names.
  • Ensure that you are registering the icon correctly. After the RTE is fully initialised, the `tbGenerator.registerIcon` method should be called. If you attempt to register the icon too early, it may not work.
  • Sometimes, icons may be part of a specific namespace or require a prefix. Make sure you are using the correct identifier for the icon.

Avatar

Community Advisor

@AliSyed1 : Not sure if you have already seen this: https://experience-aem.blogspot.com/2021/03/aem-cloud-service-css-and-color-picker-plugin-rte-rich-t...


I was able to use stylePicker icon by looking at this. Please try if you not already tried.

thank you.

Avatar

Community Advisor

Hi @AliSyed1 ,

We can set all the avialable icon mentioned here https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Icon....

I am able to set the mentioned  icons like lightbulb , fileIdea,etc We can register icon with their class name.

tbGenerator.registerIcon(groupFeature, "fileIdea");

or 

tbGenerator.registerIcon(groupFeature, "lightbulb");

where groupfeature is like below, 

var groupFeature = GROUP + "#" + PLUGIN_FEATURE;

You may refer https://experience-aem.blogspot.com/2021/03/aem-cloud-service-css-and-color-picker-plugin-rte-rich-t... for more details on group, feature & groupFeature.

PFA

MukeshYadav__1-1735103675442.png

MukeshYadav__2-1735103778786.png

Thanks