diff --git a/samples/charts/toolbar/custom-tool/index.html b/samples/charts/toolbar/custom-tool/index.html
index 6b1523b0b..b592fddab 100644
--- a/samples/charts/toolbar/custom-tool/index.html
+++ b/samples/charts/toolbar/custom-tool/index.html
@@ -35,6 +35,13 @@
                 name="CustomIconName"
                 id="CustomIconName">
                 </igc-tool-action-label>
+                <igc-tool-action-label
+                title="Custom Icon 2"
+                icon-name="CustomIcon2"
+                icon-collection-name="CustomCollection2"
+                name="CustomIconName2"
+                id="CustomIconName2">
+                </igc-tool-action-label>
             </igc-toolbar>
         </div>
         <div class="aboveContentRightContainer">
diff --git a/samples/charts/toolbar/custom-tool/src/index.ts b/samples/charts/toolbar/custom-tool/src/index.ts
index 5781777e2..fc671b14f 100644
--- a/samples/charts/toolbar/custom-tool/src/index.ts
+++ b/samples/charts/toolbar/custom-tool/src/index.ts
@@ -21,6 +21,7 @@ export class Sample {
     private legend: IgcLegendComponent
     private toolbar: IgcToolbarComponent
     private customIconName: IgcToolActionLabelComponent
+    private customIconName2: IgcToolActionLabelComponent
     private chart: IgcCategoryChartComponent
     private _bind: () => void;
 
@@ -28,6 +29,7 @@ export class Sample {
         var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
         var toolbar = this.toolbar = document.getElementById('toolbar') as IgcToolbarComponent;
         var customIconName = this.customIconName = document.getElementById('CustomIconName') as IgcToolActionLabelComponent;
+        var customIconName2 = this.customIconName2 = document.getElementById('CustomIconName2') as IgcToolActionLabelComponent;
         var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
 
         this._bind = () => {
@@ -55,6 +57,8 @@ export class Sample {
         const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
         toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
 
+        toolbar.registerIconFromDataURL("CustomCollection2", "CustomIcon2", "https://www.svgrepo.com/show/678/calculator.svg");
+
     }
 
 }