1 files changed, 4 insertions, 1 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index a6887cbba..37c34cf19 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -25,8 +25,9 @@ import { Colors } from '../../global/globalEnums';
 import { SetActiveInkColor } from '../../InkingStroke';
 import { StyleProp } from '../../StyleProvider';
 import { FieldView, FieldViewProps } from '.././FieldView';
-import './FontIconBox.scss';
 import { RichTextMenu } from '../formattedText/RichTextMenu';
+import { FontIconBadge } from './FontIconBadge';
+import './FontIconBox.scss';
 const FontIconSchema = createSchema({
     icon: "string",
 });
@@ -176,6 +177,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                     <div className={`button`} onClick={action((e) => setValue(checkResult + 1))}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} />
                     </div>
+
                     {this.rootDoc.dropDownOpen ?
                         <div>
                             <div className="menuButton-dropdownList"
@@ -532,6 +534,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                     <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {menuLabel}
+                        <FontIconBadge collection={Cast(this.rootDoc.watchedDocuments, Doc, null)} />
                     </div >
                 );
                 break;