add material icons to pdf, save and download it as a new pdf

Question

I have a requirement in angular. I need to add material icons to the pdf using drag and drop functionality and place it in cursor pointed location. Then this should be saved and downloaded as a new pdf.

I am uploading the pdf here:

<div style="margin-top: 7px;">
     <button (click)="uploader.click()" class="button">
         Browse Device
     </button>
     </div>
     <input hidden type="file" #uploader (change)="fileBrowseHandler($event)" />
 <div>

In Ts file:

fileBrowseHandler($event: any) {
   let file:any;
   if($event.target){
     file =$event.target.files[0];
   } else {
     file = $event[0];
   }
   if (this.validDocument(file.name)) {
   var newFile = new Blob([file], {type: 'application/pdf'});
   const fileReader = new FileReader();
   var fileUrl = URL.createObjectURL(newFile);
   var pdfUrl = this.sanitizer.bypassSecurityTrustUrl(fileUrl);
   var pdfName = {
      url: pdfUrl,
      fileName: file.name
   };
   if(file.name !== undefined) {
   this.fileName = file.name;
   this.pdfSrc = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL,       this.sanitizer.bypassSecurityTrustResourceUrl(fileUrl)) as string;
   this.fileUploaded = true;
    }
   }
   }

I have also added zoom-in zoom-out functionality for the pdf view:

  <div class="zoomButtons">
      <mat-icon (click)="incrementZoom(-0.1)">remove</mat-icon>&nbsp;
      <mat-icon (click)="incrementZoom(0.1)">add</mat-icon>&nbsp;
    </div>
    <pdf-viewer [src]="pdfSrc" [render-text]="true" [original-size]="false" id="pdf_view"                       [zoom]="zoom"
    [original-size]="true"></pdf-viewer>
  </div>

Now, I need to drag material icons and drop it on top of the pdf displayed on screen. this should be saved and download it as a new pdf. or is there any other library i can use to edit pdf and add icons to it in angular application. Please help me on this,