feature request: add icons for wind bearing

[Mariusthvdb]

following up on community discussion:

https://community.home-assistant.io/t/custom-dark-sky-animated-weather-card/59816/815?u=mariusthvdb

and create something like:

using:

    this.cardinalDirectionsIcon = [
      'mdi:arrow-down', 'mdi:arrow-bottom-left', 'mdi:arrow-left',
      'mdi:arrow-top-left', 'mdi:arrow-up', 'mdi:arrow-top-right',
      'mdi:arrow-right', 'mdi:arrow-bottom-right', 'mdi:arrow-down'
    ];

this is how I've now hard coded my example:

`    var wind = this.config.entity_wind_bearing && this.config.entity_wind_speed ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span><span id="beaufort-text">${this.current.beaufort}</span><span class="ha-icon"><ha-icon icon="mdi:arrow-top-right"></ha-icon></span><span id="wind-bearing-text"> ${this.current.windBearing}</span><span id="wind-speed-text"> ${(this.current.windSpeed)*3.6}</span><span class="unit"> ${this.getUOM('length')}/h</span></li>` : ``;`

wouldn't mind splitting the line up to have it use an extra slot position, but as it is, is shows nicely compact thanks for considering!

---update---

using this template (thanks to @petro) for customizing the sensor works as expected, maybe it would be useful for your card too:

   sensor.dark_sky_wind_bearing:
      templates:
        icon: >
          var icons = [ 'mdi:arrow-down', 'mdi:arrow-bottom-left', 'mdi:arrow-left', 
                        'mdi:arrow-top-left', 'mdi:arrow-up', 'mdi:arrow-top-right', 
                        'mdi:arrow-right', 'mdi:arrow-bottom-right' ];
          var quadrant = Math.round(Number(state)/45);
          if (quadrant < icons.length) return icons[quadrant];
          return 'mdi:arrow-down';