Feature: Adds support for filling the bar with icons from the official weather card

Note: The goal of this PR is to get initial feedback for the idea. If we are happy with the approach, I'll add tests, clean up the code and deal with corner cases.

What problem does this PR solve?

I have this card in a wallboard. However, the icons are too small to be viewed across the room, and I can never remember which color represents each weather condition.

Proposed solution

I'd like to have a view more similar to the Weather app in Android: instead of using bars, display an icon for each hour/segment. Optionally, use more colorful icons.

I've introduced two new options:

icon_fill: instead of displaying a bar of length N for each weather condition and an icon in the center of the bar, it will add N <span> tags, each with the same icon.
official_icons: instead of using mdi:* icons, it will use SVGs from the official Weather Forecast card. Unfortunately I don't know how to grab those icons from the host HomeAssistant instance, so I had to copy the code over from their repo.

This is how it looks like:

Problems/questions

Currently, setting icon_fill:false and official_icons:true will result in a broken UI, with huge icons. Need to update my CSS skills to solve it.
I'm removing the condition class (eg: class="cloudy") to hide the bar colors. Arguably, this class should stay and we should hide the color using something else. Open to ideas.
Not a big fan of the names icon_fill or official_icons, open to suggestions.
I don't fully understand the max-width property of condition-icon class. I know it has something to do with hiding the icon if the space is too small, but not sure how it is computed and the best way to override it when icon_fill:true.

PS: Cheers from a fellow ex-Atlassian :D

decompil3d / lovelace-hourly-weather