Using CSS to change icon color of uploaded icons

[Smarthome_Chelmsford]

I have been using some custom CSS code in themes to get some cool and needed effects for my dashboard. I have been playing around with code to change the color of an icon. The following CSS code works great for system icons:

.–theme-style-active .icon {color: blue};

When I use a icon I created in photoshop (of type png) and uploaded into my sharptools icon library, it doesn’t change the color.

Interestingly, the code:

.–theme-style-active .icon {background-color: blue};

Does change the background of tiles I have uploaded.

Anyone else attempting to do this and have had any success?

[josh]

@Smarthome_Chelmsford

When I use a icon I created in photoshop (of type png) and uploaded into my sharptools icon library, it doesn’t change the color.

That makes sense as a PNG is a ‘raster’ image where the pixels are fixed much like a photo.

You might find the following discussion from another thread helpful:

@josh

One downside to these is they are PNGs rather than SVG, so there’s a few things you tradeoff compared to a single color SVG:

• PNGs are a fixed color (no theme support)
  • Single color SVGs can be automatically recolored to match your theme preferences
  • This PNG will always be red whereas the SVG version could change colors with the theme (and do other neat things like apply glow effects, etc)
• PNGs are not ‘infinitely scalable’
  • In this case, the PNG seems to scale down well enough, but you can start to see some of the ‘aliasing’ on the edges in the downscaled version
  • SVGs on the other hand should scale infinitely up or down without loss of resolution
• PNG file size is much larger than SVG
  • In this case, the PNG is only 20kb but it’s still more than 20x larger than the 1kb SVG
  • Most PNGs with more detail / color tend to be much larger (again, this is all relative)

That being said, PNG gives you some benefits:

• Full color support with details
  • For example, if you want a more ‘realistic’ style with your icons, that source seems have a lot of great icons
• Great compression for computer generated art
  • PNG is great for clipart-style icons and yields a relatively small file
    (eg. a photo is better as a JPEG)
• Support for transparency
  • Compared to JPEG, PNG is great for things like icons where you want a transparent background

As you can tell from the above, SVG images tend to be preferred for most cases – especially if you want to be able to ‘recolor’ single color icons.

[Smarthome_Chelmsford]

Josh,

This is FANTASTIC information. I was “today years old” when I learned the difference between SVG and PNG.

Using what you explained, I downloaded a very specific icon that is SVG, uploaded it into sharptools, and when I used it, low and behold, the color changed.

After jumping through some hoops, I was able to convert one of my simpler png icons I created in photoshop, converted it to SVG using a tool online, then modify it with Adobe Illustrator. Took playing with some settings to get it to work but was successful.

I am pretty sure that some of my more complex pngs will not convert properly, because I used shading to create multiple tones of white for my icons. When I convert those, it changes everything to monochrome, so it looses the impact.

Overall was a great learning experience, and for simpler monochrome icons I have created, I can have them in SVG and be able to have sharptools successfully convert the color (when I put white icons on white shade background) properly as it does for the system icons.

Thank you!