hello @santiago5 @trividar can you send me a link from the icon, which you want to implemented?

@janloebel interesting module. Can you add some pictures?

@doudy try this:

.currentweather .weathericon {
    position: absolute;
    z-index: 0;
    height: 20px;
    right: 180px;
    margin-top: -65px;
    }

How did you integrate the new icons?

@tagriel i will test it.

Nice Mirror!!
Which Font do you use?

@tagriel i have used svg Icons because it was easier for me.
I can try to make a solution with the CSS Icons which you have linked here.

@lavolp3 my solution works.
For the web server is the Magic Mirror directory the “root” directory. So you have to create the fonts directory in the Magic Mirror directory.

Try to put your fonts directory in the Magic Mirror directory.

Try this:

@font-face {
  font-family: "MyFont";
  font-style: normal;
  font-weight: 100;
  src:
    local("SF-Pro-Display-Light"),
    url("/fonts/SF-Pro-Display-Light.otf") format("truetype");
}

and i have change this too:

.thin {
  font-family: "MyFont";
  font-weight: 100;
}

.light {
  font-family: "MyFont";
  font-weight: 300;
}

.regular {
  font-family: "MyFont";
  font-weight: 400;
}

.bold {
  font-family: "MyFont";
  font-weight: 700;
}

hope it helps.

@smotx you’re welcome, no problem

@mmille40 you must copy the icons in the CSS folder (/css/icons/) and add the code to your custom.css only.
But it works only with the standard weatherforecast module.

Here is my current config for the custom icon.

/* Aenderungen Wetter Icon */
/* Aenderungen aktuelles Wetter */

.currentweather .weathericon {
  position: absolute;
  z-index: 0;
  height: 200px;
  right: 180px;
  margin-top: -65px;
}

.currentweather .wi-day-sunny {
content: url("/css/icons/day.svg");
}

.currentweather .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
}

.currentweather .wi-rain {
content: url("/css/icons/rainy-6.svg");
}

.currentweather .wi-night-clear {
content: url("/css/icons/night.svg");
}

.currentweather .wi-night-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
padding-right: 15px;
padding-top: 10px;
}

.currentweather .wi-cloudy {
content: url("/css/icons/cloudy.svg");
}

.currentweather .wi-showers {
content: url("/css/icons/rainy-7.svg");
}

.currentweather .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.currentweather .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.currentweather .wi-cloudy-windy {
content: url("/css/icons/cloudy-day-3.svg");
}

.currentweather .wi-night-rain {
content: url("/css/icons/rainy-6.svg");
}

.currentweather .wi-night-snow {
content: url("/css/icons/snowy-6.svg");
}

.currentweather .wi-night-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.currentweather .wi-night-showers {
content: url("/css/icons/rainy-7.svg");
}

.currentweather .wi-fog {
content: url("/css/icons/cloudy.svg");
}

.currentweather .wi-night-alt-cloudy-windy {
content: url("/css/icons/cloudy-night-1.svg");
padding-right: 20px;
padding-top: 10px;
}

/* Aenderungen Wettervorhersage */

.weatherforecast .weathericon {
  position: absolute;
  left: 35px;
  z-index: 1;
  margin-top: -30px;
  height: 60px;
}

.weatherforecast .wi-day-sunny {
content: url("/css/icons/day.svg");
padding-left: 6px;
padding-top: 5px;
height: 50px;
}

.weatherforecast .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
height: 45px;
padding-left: 8px;
padding-top: 10px;
}

.weatherforecast .wi-rain {
content: url("/css/icons/rainy-6.svg");
padding-left: 8px;
padding-top: 5px;
height: 45px;
}

.weatherforecast .wi-night-clear {
content: url("/css/icons/night.svg");
}

.weatherforecast .wi-night-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
height: 45px;
padding-left: 5px;
padding-top: 7px;
}

.weatherforecast .wi-cloudy {
content: url("/css/icons/cloudy.svg");
height: 50px;
padding-left: 5px;
padding-top: 7px;
}

.weatherforecast .wi-showers {
content: url("/css/icons/rainy-7.svg");
}

.weatherforecast .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.weatherforecast .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.weatherforecast .wi-cloudy-windy {
content: url("/css/icons/cloudy-day-3.svg");
height: 45px;
padding-left: 8px;
padding-top: 7px;
}

.weatherforecast .wi-night-rain {
content: url("/css/icons/rainy-6.svg");
padding-left: 8px;
padding-top: 5px;
height: 45px;
}

.weatherforecast .wi-night-snow {
content: url("/css/icons/snowy-6.svg");
}

.weatherforecast .wi-night-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.weatherforecast .wi-night-showers {
content: url("/css/icons/rainy-7.svg");
}

.weatherforecast .wi-fog {
content: url("/css/icons/cloudy.svg");
}

.weatherforecast .wi-night-alt-cloudy-windy {
content: url("/css/icons/cloudy-night-1.svg");
height: 50px;
padding-left: 5px;
padding-top: 7px;
}

@michmich why does electron have to be updated?
With electron 2.0.0 my Pi runs at 75 degrees. (I have switched to “toverlay=vc4-fkms-v3d”.)
Now i have downgraded electron to version 1.4.15.
My pi runs now at 49 degrees and the MagicMirror Software is faster.

I use Raspberry Pi 3 with cooling fins!

@solelo here is my currentweather config:

                {
                        "module": "currentweather",
                        "position": "top_right",
                        "config": {
                                "onlyTemp": "true",
                                "location": "Berlin",
                                "locationID": "1234567890",
                                "appid": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
                                }
                },

You have to add only “onlyTemp”: “true” to your config.js

I have add the other icons. But not all are properly positioned yet.
And a there is no icon for fog.
In the next few weeks I will position the icon correctly.
This solution is maybe not the best but it works!

Picture:

For this icons you need this icon package:
https://www.amcharts.com/free-animated-svg-weather-icons/

Copy the icon from the folder “animated” to the folder “MagicMirror/css/icons”

Then you have to add this code to your “custom.css” file.

/* Aenderungen Wetter Icon */
/* Aenderungen aktuelles Wetter */

.currentweather .weathericon {
  position: absolute;
  z-index: 0;
  height: 200px;
  right: 180px;
  margin-top: -65px;
}

.currentweather .wi-day-sunny {
content: url("/css/icons/day.svg");
}

.currentweather .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
}

.currentweather .wi-rain {
content: url("/css/icons/rainy-6.svg");
}

.currentweather .wi-night-clear {
content: url("/css/icons/night.svg");
}

.currentweather .wi-night-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
padding-right: 15px;
padding-top: 10px;
}

.currentweather .wi-cloudy {
content: url("/css/icons/cloudy.svg");
}

.currentweather .wi-showers {
content: url("/css/icons/rainy-7.svg");
}

.currentweather .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.currentweather .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.currentweather .wi-cloudy-windy {
content: url("/css/icons/cloudy-day-3.svg");
}

.currentweather .wi-night-rain {
content: url("/css/icons/rainy-6.svg");
}

.currentweather .wi-night-snow {
content: url("/css/icons/snowy-6.svg");
}

.currentweather .wi-night-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.currentweather .wi-night-showers {
content: url("/css/icons/rainy-7.svg");
}

.currentweather .wi-fog {
content: url("/css/icons/cloudy.svg");
}

.currentweather .wi-night-alt-cloudy-windy {
content: url("/css/icons/cloudy-night-1.svg");
}

/* Aenderungen Wettervorhersage */

.weatherforecast .weathericon {
  position: absolute;
  left: 35px;
  z-index: 1;
  margin-top: -30px;
  height: 60px;
}

.weatherforecast .wi-day-sunny {
content: url("/css/icons/day.svg");
padding-left: 6px;
padding-top: 5px;
height: 50px;
}

.weatherforecast .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
}

.weatherforecast .wi-rain {
content: url("/css/icons/rainy-6.svg");
padding-left: 8px;
padding-top: 5px;
height: 45px;
}

.weatherforecast .wi-night-clear {
content: url("/css/icons/night.svg");
}

.weatherforecast .wi-night-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
height: 50px;
padding-left: 5px;
padding-top: 7px;
}

.weatherforecast .wi-cloudy {
content: url("/css/icons/cloudy.svg");
}

.weatherforecast .wi-showers {
content: url("/css/icons/rainy-7.svg");
}

.weatherforecast .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.weatherforecast .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.weatherforecast .wi-cloudy-windy {
content: url("/css/icons/cloudy-day-3.svg");
height: 45px;
padding-left: 8px;
padding-top: 7px;
}

.weatherforecast .wi-night-rain {
content: url("/css/icons/rainy-6.svg");
padding-left: 8px;
padding-top: 5px;
height: 45px;
}

.weatherforecast .wi-night-snow {
content: url("/css/icons/snowy-6.svg");
}

.weatherforecast .wi-night-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.weatherforecast .wi-night-showers {
content: url("/css/icons/rainy-7.svg");
}

.weatherforecast .wi-fog {
content: url("/css/icons/cloudy.svg");
}

.weatherforecast .wi-night-alt-cloudy-windy {
content: url("/css/icons/cloudy-night-1.svg");
height: 50px;
padding-left: 5px;
padding-top: 7px;
}

As I said not completely finished.

@SoleLo in the next few days i will implement the other icon. Then I’ll tell you how I did it.

I try this icons: https://www.amcharts.com/free-animated-svg-weather-icons/

But at the moment only the 3 icons on the picture works.

@vulcain i will try it soon. Thank you 🙂🙂

@Vulcain how did you implented the weather icons?

Nice work, i see you used a radar sensor.
How and where exactly did you attach this?

Hello, can i view this module only when the CPU temperature is over XX °C?