1

I need to store all my icons in backend and therefore need to access them through the link.

I tried to do something like:

<ion-icon [src]="'https://my-api/static/icons/home.svg'"></ion-icon>

But it does not render the icon.

I use ionic/Angular 5.

Unfortunately, this answer didn't work.

Islam Murtazaev
  • 1,488
  • 2
  • 17
  • 27

2 Answers2

0

Try to create a variable in Ts file ImageURL and bind it with src

<ion-icon [src]="ImageURL"></ion-icon>

, Or you can do below

<ion-icon [src]="https://my-api/static/icons/home.svg"></ion-icon> <-- do this 
<ion-icon [src]=" this comma is not needed-->'https://my-api/static/icons/home.svg'"></ion-icon> <--- instead this
Apoorva Chikara
  • 8,277
  • 3
  • 20
  • 35
  • I tried to follow your answer, but now I get CORS error: `Access to fetch at 'https://svgshare.com/i/6r_.svg' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.` – Islam Murtazaev Jan 10 '21 at 10:34
  • 1
    Generally, CORS are being handled at the backend API end points. If you are using Nodejs, you can use cors() and allow request from localhost as of now, or you can use Cors plugin in google chrome and enable it. It is only for development purposes. – Apoorva Chikara Jan 10 '21 at 10:39
0

Make sure your link is accessible and remove colon (') in link,

also you may want to check slash in your link :

Have a look at following working example:https://stackblitz.com/edit/ionicons-v4-atqxdt?file=pages%2Fhome%2Fhome.html

Amrit
  • 2,115
  • 1
  • 21
  • 41