title: Javascript: "ReferenceError: icon is not defined"
body: <p>I am using openlayers to add points to a map and style them with a stylefunction. This code worked one week ago and today I loaded it without any changes and got the error "ReferenceError: icon is not defined".</p>
  
  <p>The function asks for an attribute of the vector and then styles it with different images, according to the attribute.</p>
  
  <pre><code>var styleFunction = function(feature, resolution) {
      if(feature.get('class') === 'Artificial surface') {
          icon = 'icons/Artificial_surfaces.svg'
      } else if(feature.get('class') === 'Bare land') {
          icon = 'icons/Barrenlands.svg'
      } else if(feature.get('class') === 'Cultivated land') {
          icon = 'icons/Cultivated_land.svg'
      } else if(feature.get('class') === 'Forest') {
          icon = 'icons/Forests.svg'
      } else if(feature.get('class') === 'Grassland') {
          icon = 'icons/Grasslands.svg'
      } else if(feature.get('class') === 'Shrubland') {
          icon = 'icons/Shrublands.svg'
      } else if(feature.get('class') === 'Water body') {
          icon = 'icons/Waterbodies.svg'
      } else if(feature.get('class') === 'Wetland') {
          icon = 'icons/Wetland.svg'
      }
      return [new ol.style.Style({
          image: new ol.style.Icon({
              src: icon,
              scale: 0.7
          })
      })]
  };
  
  var points = new ol.layer.Vector ({
      title: 'Gathered Points',
      source: vectorTwo,
      style: styleFunction
  });
  </code></pre>
  
  <p>I am quite new to javascript, so probably it is a simple error I am facing, but I did not find a solution for it and I am kind of confused because it worked a week ago and I didn't apply any changes.</p>