I'd like to use ionic icons dynamically like this:
<ion-icon src="https://eu.ui-avatars.com/api/?background=0D8ABC&color=fff"></ion-icon>
Any idea how to make this work? (if it's possible)
The ion-icon component only accepts valid .svg files for src='/path/to/file.svg' attribute. As stated from the Ionicon documentation.
Custom icons To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.
<ion-icon src="/path/to/external/file.svg"></ion-icon>
The image in your src attribute is a .png format instead of a .svg which the component is expecting. This will then cause the component not to render the icon. If you instead use .svg it will turn out the way you expect.