I was struggling with icons all the time myself. The condition names are different by provider and are also different by language. But the condition ID’s would also be different by provider.
I am now using the Weather Underground 2.0 binding, which is not in the distribution yet, but you can find a link in this PR #2748. It contains a channel providing a link to the weather condition icon from Wunderground. I use that icon in the template. It may not look quit as nice, but it works perfectly well for me.
You will need to have the corresponding items in the panel definition below. I set them all up through PaperUI.
Here is my dashboard code:
<div ng-init="ServerPath='../static/weather-data'; IconSet='flat_colorful'">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/example.css" />
</div>
<div ng-init="daysnames={'Sunday': 'Zondag', 'Monday': 'Maandag', 'Tuesday': 'Dinsdag', 'Wednesday' : 'Woensdag', 'Thursday' : 'Donderdag', 'Friday' : 'Vrijdag', 'Saturday' : 'Zaterdag'}">
</div>
<table id="weather-table">
<tr>
<td colspan="9" id="header" align="center" ng-if="itemValue('WeatherInformation_Current_ObservationTime')!='UNDEF'"><b>Weersvoorspelling van {{itemValue('WeatherInformation_Current_ObservationTime') | date:'d/M/yy H:mm'}}</b></td>
<td colspan="9" id="header" align="center" ng-if="itemValue('WeatherInformation_Current_ObservationTime')=='UNDEF'"><b>Weersvoorspelling van --/--/----</b></td>
</tr>
<tr colspan="9">
<td height="10"></td>
</tr>
<tr>
<td rowspan="2" colspan="3" ng-if="itemValue('Condition')!='UNDEF'"><img id="weather-icon" src="{{itemValue('WeatherInformation_Current_WeatherIconURL')}}"/></td>
<td rowspan="2" colspan="3" ng-if="itemValue('Condition')=='UNDEF'"><img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/></td>
<td colspan="3" id="weather-temp" align="center" ng-if="itemValue('Temperature')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temperature')}}<font id="weather-temp-sign">°C</font></td>
<td colspan="3" id="weather-temp" align="center" ng-if="itemValue('Temperature')=='UNDEF'">--</td>
</tr>
<tr>
<td>
<table id="weather-table-details">
<tr>
<td align="left">Luchtvochtigheid:</td>
</tr>
<tr>
<td align="left">Luchtdruk:</td>
</tr>
</table>
</td>
<td>
<table id="weather-table-details">
<tr>
<td align="right" ng-if="itemValue('Humidity')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Humidity')}} %</td>
<td align="right" ng-if="itemValue('Humidity')=='UNDEF'">-- %</td>
</tr>
<tr>
<td align="right" ng-if="itemValue('Pressure')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Pressure')}} hPa</td>
<td align="right" ng-if="itemValue('Pressure')=='UNDEF'">-- hPa</td>
</tr>
</table>
</td>
</tr>
<tr colspan="9">
<td height="20"></td>
</tr>
<tr>
<td/>
<td>Vandaag</td>
<td>Morgen</td>
<td ng-if="itemValue('ObservationTime3')!='UNDEF'">{{daysnames[(itemValue('ObservationTime2') | date:'EEEE')]}}</td>
<td ng-if="itemValue('ObservationTime2')=='UNDEF'">--</td>
<td ng-if="itemValue('ObservationTime3')!='UNDEF'">{{daysnames[(itemValue('ObservationTime3') | date:'EEEE')]}}</td>
<td ng-if="itemValue('ObservationTime3')=='UNDEF'">--</td>
<td ng-if="itemValue('ObservationTime4')!='UNDEF'">{{daysnames[(itemValue('ObservationTime4') | date:'EEEE')]}}</td>
<td ng-if="itemValue('ObservationTime4')=='UNDEF'">--</td>
<td ng-if="itemValue('ObservationTime5')!='UNDEF'">{{daysnames[(itemValue('ObservationTime5') | date:'EEEE')]}}</td>
<td ng-if="itemValue('ObservationTime5')=='UNDEF'">--</td>
<td ng-if="itemValue('ObservationTime6')!='UNDEF'">{{daysnames[(itemValue('ObservationTime6') | date:'EEEE')]}}</td>
<td ng-if="itemValue('ObservationTime6')=='UNDEF'">--</td>
<td ng-if="itemValue('ObservationTime7')!='UNDEF'">{{daysnames[(itemValue('ObservationTime7') | date:'EEEE')]}}</td>
<td ng-if="itemValue('ObservationTime7')=='UNDEF'">--</td>
</tr>
<tr>
<td/>
<td ng-if="itemValue('Condition0')!='UNDEF'">
<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastToday_WeatherIconURL')}}"/>
</td>
<td ng-if="itemValue('Condition0')=='UNDEF'">
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
</td>
<td ng-if="itemValue('Condition1')!='UNDEF'">
<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastTomorrow_WeatherIconURL')}}"/>
</td>
<td ng-if="itemValue('Condition1')=='UNDEF'">
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
</td>
<td ng-if="itemValue('Condition2')!='UNDEF'">
<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay2_WeatherIconURL')}}"/>
</td>
<td ng-if="itemValue('Condition2')=='UNDEF'">
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
</td>
<td ng-if="itemValue('Condition3')!='UNDEF'">
<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay3_WeatherIconURL')}}"/>
</td>
<td ng-if="itemValue('Condition3')=='UNDEF'">
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
</td>
<td ng-if="itemValue('Condition4')!='UNDEF'">
<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay4_WeatherIconURL')}}"/>
</td>
<td ng-if="itemValue('Condition4')=='UNDEF'">
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
</td>
<td ng-if="itemValue('Condition5')!='UNDEF'">
<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay5_WeatherIconURL')}}"/>
</td>
<td ng-if="itemValue('Condition5')=='UNDEF'">
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
</td>
<td ng-if="itemValue('Condition6')!='UNDEF'">
<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay6_WeatherIconURL')}}"/>
</td>
<td ng-if="itemValue('Condition6')=='UNDEF'">
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
</td>
<td ng-if="itemValue('Condition7')!='UNDEF'">
<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay7_WeatherIconURL')}}"/>
</td>
<td ng-if="itemValue('Condition7')=='UNDEF'">
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
</td>
</tr>
<tr>
<td class="col-xs-4" style="color:red">Max</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max0')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max0')}} °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max0')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max1')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max1')}} °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max1')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max2')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max2')}} °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max2')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max3')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max3')}} °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max3')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max4')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max4')}} °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max4')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max5')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max5')}} °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max5')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max6')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max6')}} °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max6')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max7')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max7')}} °C</td>
<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max7')=='UNDEF'">-- °C</td>
</tr>
<tr>
<td class="col-xs-4" style="color:#0db9f0">Min</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min0')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min0')}} °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min0')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min1')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min1')}} °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min1')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min2')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min2')}} °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min2')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min3')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min3')}} °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min3')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min4')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min4')}} °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min4')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min5')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min5')}} °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min5')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min6')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min6')}} °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min6')=='UNDEF'">-- °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min7')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min7')}} °C</td>
<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min7')=='UNDEF'">-- °C</td>
</tr>
<tr>
<td class="col-xs-4">Neerslag</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob0')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob0')}} %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob0')=='UNDEF'">-- %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob1')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob1')}} %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob1')=='UNDEF'">-- %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob2')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob2')}} %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob2')=='UNDEF'">-- %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob3')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob3')}} %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob3')=='UNDEF'">-- %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob4')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob4')}} %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob4')=='UNDEF'">-- %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob5')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob5')}} %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob5')=='UNDEF'">-- %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob6')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob6')}} %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob6')=='UNDEF'">-- %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob7')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob7')}} %</td>
<td class="col-xs-4" ng-if="itemValue('Precip_Prob7')=='UNDEF'">-- %</td>
</tr>
<tr>
<td class="col-xs-4"></td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm0')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm0')}} mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm0')=='UNDEF'">-- mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm1')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm1')}} mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm1')=='UNDEF'">-- mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm2')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm2')}} mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm2')=='UNDEF'">-- mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm3')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm3')}} mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm3')=='UNDEF'">-- mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm4')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm4')}} mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm4')=='UNDEF'">-- mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm5')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm5')}} mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm5')=='UNDEF'">-- mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm6')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm6')}} mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm6')=='UNDEF'">-- mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm7')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm7')}} mm</td>
<td class="col-xs-4" ng-if="itemValue('RainFallMm7')=='UNDEF'">-- mm</td>
</tr>
</table>