MMM-MyWastePickup

ashishtank

@MyMirror I tried to edit it but image didn’t work correctly. moreover the image you uploaded contains image data(base64 encoded). While on https://www.svgrepo.com/vectors/bin/4 files are with svg xml only and not image data. Looks like some svg editor needs to be use to combine the images. or you can use below my hacky solution.

Edit the icon_sprite.svg and rename recycle to recycle1 for symbol id (this is to load empty svg)

< svg xmlns="http://www.w3.org/2000/svg">

  < !-- recycle -->
  < symbol id="recycle1" viewBox="0 0 24 24"> < --this line

add below in custom.css

.waste-pickup-icon.recycle {
  background-image:url('https://www.svgrepo.com/show/270587/recycle-bin-trash.svg');
}

Result

MyMirror

Hi ashishtank,

Thanks for your attempts to format the SVG appropriately. I like your way for me, because the result is the way for me here.
Where exactly can I find the custom.css?
Do I have to create this file new in the MMM-MyWastePickup folder?
Is there anything to keep in mind when doing this? Are the 3 lines enough?

MyMirror

I have changed the color of the trash can and saved the SVG in the MMM-MyWastePickup directory.
Is this call correct then?

.waste-pickup-icon.recycle {
  background-image:url('file:///home/pi/MagicMirror/modules/MMM-MyWastePickup/recycle-bin2.svg');
}

ashishtank

@MyMirror

You renamed the recycle to recycle1 in the icon_sprite.svg file right ?
You should use relative web url in css, then it will always work even if your Pi’s ip address changes.

Do below in custom.css this file should be in css folder in magicmirror directory

.waste-pickup-icon.recycle {
  background-image:url('../modules/MMM-MyWastePickup/recycle-bin2.svg');
}

MyMirror

@ashishtank
works as described and shown.
So I have a workaround for now and can deal with the actual svg problem again later.

Great, thanks a lot!