How to Change the Default Open Icon in Angular Image Editor?

2 mins read

This article explains how to change the default open icon in the Angular Image Editor toolbar. By modifying the component after it is initialized, you can replace the built-in icon with any icon of your choice—such as one from Font Awesome.

Change the Default Open Icon

To change the default open icon in the toolbar, use the created and toolbarCreated events provided by the ImageEditor component. The created event is triggered when the component is initialized, while toolbarCreated ensures the toolbar is fully rendered before DOM manipulation. Inside the toolbarCreated handler, use requestAnimationFrame to safely access the toolbar item after the next browser repaint. Then, query the icon element using document.querySelector for .e-upload-icon, and replace its default classes (e-upload-icon, e-icons) with Font Awesome classes like fa fa-folder-open.

Code Example

index.html

<link rel="icon" type="image/x-icon" href="favicon.ico" />
   <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
   />

app.component.html

<ejs-imageeditor
     #imageEditor
     id="image-editor"
     (created)="created($event)"
     (toolbarCreated)="created($event)"
   >
   </ejs-imageeditor>

app.component.ts

public created(): void {
   requestAnimationFrame(() => {
     let toolbarItem = this.imageEditorObj.element.querySelector(
       '.e-toolbar-item.e-image-upload .e-upload-icon'
     );
     if (toolbarItem) {
       toolbarItem.className =
         toolbarItem.className
           .replace('e-upload-icon', '')
           .replace('e-icons', '') + ' fa fa-folder-open';
     }
   });
 }

Output

After applying this customization, the open icon in the toolbar will display a Font Awesome folder icon instead of the default upload icon.

Sample

Live Demo on StackBlitz

Conclusion

I hope you enjoyed learning about how to change the default open icon to font in Angular Image Editor.

You can refer to our Angular Image Editor’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Angular Image Editor and other Angular components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums,Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)