How change icon from toolbar ? about react-image-lightbox HOT 3 CLOSED

Hello, thx for you're reply, i've do another solution but he's not a best way :

.ril-zoom-in{
background-image:none;
&:before{
 content:"\hexa";
font-family:"Material Icons or whatever";
}
}

This works perfectly, it would be interesting to add a customizable style sheet later to module at our convenience

Best regards,

from react-image-lightbox.

I don't have the time to write all the details up right now, but basically what I would do is get the url string for the icon, decode it from base64 using atob(<base64 string here>), change the color to black in the appropriate place, encode to base64 again with btoa(<your svg string here>) and then use that url for the background-image.

.ril-zoom-in {
    background-image: url(data:image/svg+xml;base64,YOUR_BASE64_ENCODED_SVG_STRING_HERE) !important;
}

Unfortunately, before I finish refactoring things, the !important is probably necessary.

from react-image-lightbox.

Thanks @artsx , I make it by following your advice.

For those who may not be familiar with font-family:"Material Icons or whatever";, look here: https://developers.google.com/fonts/.

font-family: is the fonts you defined in your app.
content: is the icon you want to display. '\hexa' is just what works for @artsx , you need to replace it with yours.

FYI: mine is like this:

.ril-zoom-in {
  background-image: none;
  &:before {
    content: "\ecf5";
    font-family: 'my_fonts' !important;
  }
}

from react-image-lightbox.