Has anyone figured out how to change colors of SVGs in navbars (Android)?


#1

This is the CSS I have…

navigation-bar button {
color: #797979;
font-weight: 300;
margin-left: 6px;
margin-right: 6px;
}

navigation-bar button#nav-menu {
background-image: url(icons/navicon2.svg);
}

I add the icons using…
var leftBtn = new supersonic.ui.NavigationBarButton({
title: ‘’,
onTap: function() {
console.log(‘menu clicked’);
supersonic.ui.drawers.open(‘left’);
},
styleId: “nav-menu”
});

I opened the svg file in a text editor and changed the fill color to the one I want yet it still displays as black.

I read through the forums and tried a few solutions but they all didnt work.


#2

I have same problem. (Android 5.0.2) Looks like some native script override this. mmmhhh :expressionless:


#3

This has been asked before and solved, I actually used this solution there’s it’s also somewhere in the docs http://community.appgyver.com/t/icons-in-navbar-button/3793/12

EDIT: Here http://docs.appgyver.com/supersonic/guides/ui/styling-native-components/navigation-bar-styling-example/#creating-buttons


#4

I have seen that page and it says that…

“Android icon buttons are defined by setting the background-image property of the button element. Unlike in iOS, coloring SVG icons requires you to set the color of the icon in the SVG itself, the CSS styling has no effect on it. There is no other styling available for the icon buttons.”

And I did set the color of the icon by opening the svg icon in a text editor and changing the fill color. Or is that not what they meant when they said to set the color of the icon in the SVG itself? It still displays as black.


#5

… for me not solved … My SVG stay black. ( ANDROID )

Documentation says:

Android icon buttons are defined by setting the background-image property of the button element. Unlike in iOS, coloring SVG icons requires you to set the color of the icon in the SVG itself, the CSS styling has no effect on it. There is no other styling available for the icon buttons. For an optimal outcome, Android icons should be 24x24 pixels.

BUT … my SVG have fill color #ffffff (white) … but in scanner it shows black. Maybe my SVG’s bad?


#6

Hi, I am facing the same problem and I still haven’t been able to solve it. Mine are still black in both the scanner and the google play build after I change the fill color of the SVG. Anyone else solved this?


#7

I normally color my svg before download using flaticon.