diff --git a/src/app/markup-text-component/markup-text-icon-component/markup-text-icon.component.html b/src/app/markup-text-component/markup-text-icon-component/markup-text-icon.component.html
new file mode 100644
index 0000000..7e1d002
--- /dev/null
+++ b/src/app/markup-text-component/markup-text-icon-component/markup-text-icon.component.html
@@ -0,0 +1,40 @@
+<span *ngIf="position === 'after'" [ngClass] = "segment[2]"> {{segment[1]}}</span>
+
+<!-- opening a menu if there is only one semem within the text segment -->
+<button mat-button
+        *ngIf="action === 'menu' && segment[3].length <= 1"
+        class = "annotation-button-icon"
+        [matMenuTriggerFor]="simpleMenu">
+  <mat-icon class="annotation-icon" [inline]="true" aria-hidden="false" aria-label="expand menu" title="Options">link</mat-icon>
+</button>
+<!-- hyperlink if there is only one semem within the text segment -->
+<button mat-button
+        *ngIf="action === 'external' && segment[3].length === 1"
+        class = "annotation-button-icon"
+        (click)="openLink(segment[3][0].link)">
+  <mat-icon class="annotation-icon" [inline]="true" aria-hidden="false" aria-label="expand menu" title="Options">link</mat-icon>
+</button>
+
+<!-- If there is a semantic overlap, e.g. the segment is polysemantic, Then the
+      style is defined by class "polysemantic" and onClick opens always a menu with a submenues -->
+<button mat-button
+        *ngIf="segment[3].length > 1"
+        class = "annotation-button-icon"
+        [matMenuTriggerFor]="polyMenuOpen">
+  <mat-icon class="annotation-icon" [inline]="true" aria-hidden="false" aria-label="expand menu" title="Options">link</mat-icon>
+</button>
+
+<span *ngIf="position === 'before'" [ngClass] = "segment[2]"> {{segment[1]}}</span>
+<!-- simple menu -->
+<mat-menu #simpleMenu="matMenu">
+  <div mat-menu-item title = 'open resource "{{segment[3][0].link}}" in data browser'>open resource in data browser</div>
+  <div mat-menu-item title = 'edit text "{{segment[3][0].linkText}}"'>edit text</div>
+  <div mat-menu-item title = 'edit semantic annotation "{{segment[3][0].cssClass}}"'>edit semantic annotation "{{segment[3][0].cssClass}}"</div>
+  <div mat-menu-item title = 'delete semantic annotation "{{segment[3][0].cssClass}}"'>delete semantic annotation "{{segment[3][0].cssClass}}"</div>
+</mat-menu>
+<!-- submenu if polysemantic -->
+<mat-menu #polyMenuOpen="matMenu" class="poly-menu">
+  <button mat-menu-item *ngFor="let item of segment[3], let i = index" (click)="$event.stopPropagation()" >
+    <app-submenu-component [item] = "item" [action]="action"></app-submenu-component>
+  </button>
+</mat-menu>
diff --git a/src/app/markup-text-component/markup-text-icon-component/markup-text-icon.component.ts b/src/app/markup-text-component/markup-text-icon-component/markup-text-icon.component.ts
new file mode 100644
index 0000000..9f899df
--- /dev/null
+++ b/src/app/markup-text-component/markup-text-icon-component/markup-text-icon.component.ts
@@ -0,0 +1,24 @@
+import {Component, Input, OnChanges} from '@angular/core';
+
+@Component({
+  selector: 'app-markup-text-icon-component',
+  templateUrl: './markup-text-icon.component.html',
+  styleUrls: ['../markup-text-component.component.scss']
+})
+export class MarkupTextIconComponent implements OnChanges {
+  @Input() segment: any;
+  @Input() action: string;
+  @Input() position: string;
+
+  constructor() { }
+
+  ngOnChanges() {
+    console.log('position: ', this.position);
+  }
+
+  openLink(iri) {
+    window.open(iri, '_blank');
+  }
+
+
+}