diff --git a/src/app/components/preferences/common/symbols/symbols.component.html b/src/app/components/preferences/common/symbols/symbols.component.html
index 01c65e22..74a9090b 100644
--- a/src/app/components/preferences/common/symbols/symbols.component.html
+++ b/src/app/components/preferences/common/symbols/symbols.component.html
@@ -27,7 +27,7 @@
     <div class="wrapper">
         <div class="buttonWrapper" *ngFor="let symbol of filteredSymbols | filenamefilter: searchText">
             <button [ngClass]="{ buttonSelected: isSelected === symbol.symbol_id }" class="button" (click)="setSelected(symbol.symbol_id)">
-                <img [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
+                <img [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" [src]="getImageSourceForTemplate(symbol.symbol_id)"/>
             </button>
         </div>
     </div>
diff --git a/src/app/components/preferences/common/symbols/symbols.component.ts b/src/app/components/preferences/common/symbols/symbols.component.ts
index c6932a09..3a574e15 100644
--- a/src/app/components/preferences/common/symbols/symbols.component.ts
+++ b/src/app/components/preferences/common/symbols/symbols.component.ts
@@ -76,4 +76,8 @@ export class SymbolsComponent implements OnInit {
         return `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"${imageToUpload.height}\" 
                 width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" xlink:href=\"${image}\"/>\n</svg>`
     }
+
+    getImageSourceForTemplate(symbol: string) {
+        return `http://${this.server.host}:${this.server.port}/v2/symbols/${symbol}/raw`;
+    }
 }