title: What is wrong on this code that the marker is not being displayed in the map?
body: <p>can anybody tell me why this does not work. it is practically the same than the example
  <a href="https://openlayers.org/en/latest/examples/icon.html" rel="nofollow noreferrer">https://openlayers.org/en/latest/examples/icon.html</a>
  but it does not work in my project. Im using  "ol": "^6.3.1". i spent a long time with out results trying to fix this.</p>
  
  <pre><code>import {Map, View, Feature} from 'ol';
  import OSM from 'ol/source/OSM';
  import { fromLonLat, transform } from 'ol/proj';
  import {Tile as TileLayer, Vector as VectorLayer}  from 'ol/layer'
  import VectorSource from 'ol/source/Vector';
  import {Icon, Style} from 'ol/style';
  import Point from 'ol/geom/Point';
  
    const iconFeature = new Feature({
      geometry: new Point([fromLonLat([-66.119412,-17.388694])]),
      name: 'Null Island',
      population: 4000,
      rainfall: 500,
    });
  
    const iconStyle = new Style({
      image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'https://openlayers.org/en/latest/examples/data/icon.png',
      }),
    });
    iconFeature.setStyle(iconStyle);
  
    const vectorSource = new VectorSource({
      features: [iconFeature]
    });
  
    const vectorLayer = new VectorLayer({
      source: vectorSource
    });
  
   var map = new Map({
      layers: [
        new TileLayer({
          source: new OSM()
        }), vectorLayer ],
      target: document.getElementById('map'),
      view: new View({
        center: fromLonLat([-66.119412,-17.388694]),
        zoom: 15
      })
    });
  </code></pre>