For custom icons use <img data-src='...'>

doc/Icons.md

@@ -9,7 +9,7 @@ A drawback of Unicode icons is, that the display will differ from system to syst
 #### Self defined icons
 You may upload images to your repository and use them via a relative image link:
 ```html
-<img src='img/foobar.svg'>
+<img data-src='img/foobar.svg'>
 ```
 
 This will include the image from your repository (when uploaded to your 'img' directory).
@@ -28,15 +28,15 @@ You can use normal CSS to modify its look, e.g.
 #### Mapbox Maki Icons
 Mapbox Maki Icons 4 are also included in OpenStreetBrowser. They can be accessed as images with protocol 'maki', e.g.:
 ```html
-<img src="maki:park">
+<img data-src="maki:park">
 ```
 
 This will include the park-15.svg icon. Mapbox Maki icons come in two sizes: 11 and 15. Default is 15, if you want to use 11 pass the size parameter with value 11:
 ```html
-<img src="maki:park?size=11">
+<img data-src="maki:park?size=11">
 ```
 
 You can pass URL options to the icon to modify its look. Note that every icon is a [SVG path](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) and all [style options](https://developer.mozilla.org/de/docs/Web/SVG/Tutorial/Fills_and_Strokes) are available:
 ```html
-<img src="maki:park?size=11&amp;fill=red&amp;stroke=black&amp;stroke-width=0.5">
+<img data-src="maki:park?size=11&amp;fill=red&amp;stroke=black&amp;stroke-width=0.5">
 ```

src/CategoryOverpass.js

@@ -151,7 +151,8 @@ CategoryOverpass.prototype.updateAssets = function (div) {
   for (var i = 0; i < imgs.length; i++) {
     let img = imgs[i]
 
-    var src = img.getAttribute('src')
+    // TODO: 'src' is deprecated, use only data-src
+    var src = img.getAttribute('src') || img.getAttribute('data-src')
     if (src === null) {
     } else if (src.match(/^maki:.*/)) {
       let m = src.match(/^maki:([a-z0-9-]*)(?:\?(.*))?$/)