# Use custom annotation tool icon on custom annotation in notes panel

**URL:** <https://pdfjs.community/t/use-custom-annotation-tool-icon-on-custom-annotation-in-notes-panel/402>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [December 1, 2020, 10:39pm UTC](https://pdfjs.community/t/use-custom-annotation-tool-icon-on-custom-annotation-in-notes-panel/402 "2020-12-01T22:39:53Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![eric1](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/eric1/32/206_2.png) [@eric1](https://pdfjs.community/u/eric1)\
**Post date:** [December 1, 2020, 10:39pm UTC](https://pdfjs.community/t/use-custom-annotation-tool-icon-on-custom-annotation-in-notes-panel/402/1 "2020-12-01T22:39:53Z")

</div>

**PDF.js Express Version**  
7.2.0

**Detailed description of issue**  
I’m trying to create a custom annotation and annotation tool which extends the `TextHighlightAnnotation`.

I’m able to add the custom tool and annotation and it works ok.

But the annotations display in the notes panel with the highlight icon (icon-tool-text-manipulation-highlight) instead of the icon I supplied for the tool button.

**Expected behaviour**  
When registering the tool I was expecting the icon to be set from the button image:

> <https://github.com/PDFTron/webviewer-ui/blob/d3e7c21b195f5d50246d19a70f68121815d5e24d/src/constants/map.js#L440-L457>

Then when the icon is looked up in the NoteContent compoennt:  
\_\_https://github.com/PDFTron/webviewer-ui/blob/d3e7c21b195f5d50246d19a70f68121815d5e24d/src/components/NoteContent/NoteContent.js#L124

It should find the key corresponding to my tool registration by using annotCheck function:

> <https://github.com/PDFTron/webviewer-ui/blob/d3e7c21b195f5d50246d19a70f68121815d5e24d/src/constants/map.js#L421-L425>

But my custom annotations have the icon for the ‘highlight’ entry in the map instead. I.e. they display with the same icon as the TextHighlightAnnotationTool.

I tried supplying a function for the customAnnotationCheckFunc parameter of registerTool \_\_https://github.com/PDFTron/webviewer-ui/blob/d3e7c21b195f5d50246d19a70f68121815d5e24d/src/apis/registerTool.js#L13

But the annotationCheck function always seems to get a ‘null’ parameter instead of the annotation.

**Code snippet**

```
const {Annotations, Tools, annotManager, docViewer} =
  this.webViewerInstance;

const MyCustomAnnotation = function () {
  Annotations.TextHighlightAnnotation.call(this);
  this.Subject = 'MyCustom'
};

MyCustomAnnotation.prototype = new Annotations.TextHighlightAnnotation();
MyCustomAnnotation.prototype.elementName = "myCustom";

const MyCustomCreateTool = function (docViewer) {
  Tools.TextAnnotationCreateTool.call(this, docViewer, MyCustomAnnotation);
  this.defaults.StrokeColor = new Annotations.Color(0, 255, 0);
};

MyCustomCreateTool.prototype = new Tools.TextHighlightCreateTool();
const myCustomToolName = 'AnnotationCreateMyCustom';

annotManager.registerAnnotationType(
  MyCustomAnnotation.prototype.elementName,
  MyCustomAnnotation
);

const myCustomCreateTool = new MyCustomCreateTool(docViewer);
this.webViewerInstance.registerTool(
  {
    toolName: myCustomToolName,
    toolObject: myCustomCreateTool,
    buttonImage: 'ic_pan_black_24px',
    buttonName: 'myCustomToolButton',
    tooltip: 'My Custom'
  },
  MyCustomAnnotation,
  annotation => {
    console.log(annotation) // 'null'
  }
);

```

**PS** - I had to put underscores in front of a couple of the github links to prevent the parsing as links as there appears to be a restriction on new users creating a post with more than two links.

---

_[View the full topic](https://pdfjs.community/t/use-custom-annotation-tool-icon-on-custom-annotation-in-notes-panel/402)._