From 316e9aff6b3e1cfdc14dae4498b66473382c048a Mon Sep 17 00:00:00 2001
From: SaravanaPriya31 <Saravana31>
Date: Tue, 2 Jan 2024 17:51:05 +0530
Subject: [PATCH 1/2] 856503-icon

---
 .../customize existing toolbar/src/app/app.ts | 53 ++++++++++++++-----
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/How to/customize existing toolbar/src/app/app.ts b/How to/customize existing toolbar/src/app/app.ts
index 8d800b6..486c55c 100644
--- a/How to/customize existing toolbar/src/app/app.ts	
+++ b/How to/customize existing toolbar/src/app/app.ts	
@@ -1,24 +1,49 @@
 import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print,CustomToolbarItemModel} from '@syncfusion/ej2-pdfviewer';
-
+import { ComboBox } from "@syncfusion/ej2-dropdowns";
+import { TextBox } from "@syncfusion/ej2-inputs";
 PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print);
-let toolItem: CustomToolbarItemModel = {
+let toolItem1: CustomToolbarItemModel = {
     prefixIcon: 'e-icons e-paste',
     id: 'print',
     tooltipText: 'Custom toolbar item',
-    align: 'left'
 };
+let toolItem2: CustomToolbarItemModel = {
+    id: 'download',
+    text: 'Save',
+    tooltipText: 'Custom toolbar item',
+    align: 'right'
+};
+let LanguageList: string[] = ['Typescript', 'Javascript', 'Angular', 'C#', 'C', 'Python'];
+let toolItem3: CustomToolbarItemModel = {
+    type: 'Input',
+    tooltipText: 'Language List',
+    cssClass: 'percentage',
+    align: 'Left',
+    id: 'dropdown',
+    template: new ComboBox({ width: 100, value: 'TypeScript', dataSource: LanguageList, popupWidth: 85, showClearButton: false, readonly: false })  
+};
+let toolItem4: CustomToolbarItemModel = {
+    type: 'Input',
+    tooltipText: 'Text',
+    align: 'Right',
+    cssClass: 'find',
+    id: 'textbox',
+    template: new TextBox({ width: 125, placeholder: 'Type Here', created: OnCreateSearch })
+}
 let pdfviewer: PdfViewer = new PdfViewer();
 pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
 pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
-pdfviewer.toolbarSettings = { toolbarItems: [toolItem, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}
-   
+pdfviewer.toolbarSettings = { toolbarItems: [toolItem1, toolItem2, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', toolItem3, 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', toolItem4, 'CommentTool', 'SubmitForm']}
 pdfviewer.appendTo('#PdfViewer');
-    //To handle custom toolbar click event.
-    pdfviewer.toolbarClick = function (args) {
-        if (args.item && args.item.id === 'print') {
-            pdfviewer.print.print();
-        }
-        else if (args.item && args.item.id === 'download') {
-            pdfviewer.download();
-        }
-    };
\ No newline at end of file
+//To handle custom toolbar click event.
+pdfviewer.toolbarClick = function (args) {
+   if (args.item && args.item.id === 'print') {
+      pdfviewer.print.print();
+   }
+   else if (args.item && args.item.id === 'download') {
+      pdfviewer.download();
+   }
+};
+function OnCreateSearch(this: any): any {
+    this.addIcon('prepend', 'e-icons e-search');
+}
\ No newline at end of file

From af20e1a0457a6e18949c001ed6ef29bbd6765750 Mon Sep 17 00:00:00 2001
From: SaravanaPriya31 <Saravana31>
Date: Tue, 2 Jan 2024 18:35:40 +0530
Subject: [PATCH 2/2] commit

---
 How to/customize existing toolbar/src/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/How to/customize existing toolbar/src/index.html b/How to/customize existing toolbar/src/index.html
index 5d1a94b..d9ac8e1 100644
--- a/How to/customize existing toolbar/src/index.html	
+++ b/How to/customize existing toolbar/src/index.html	
@@ -13,6 +13,7 @@
 
 <body>
     <!--Element which will render as PDF Viewer -->
+    <br><br><br>
     <div id="PdfViewer"></div>
 </body>