How to fill with color transparent place in icon

[dennisbejencev-an]

For example, I have bookmark check icon, and needs transparent check mark fill with color I tried in this way, but looks so

<View style={{ backgroundColor: 'white', height: 35, width: 35}}>
    <MaterialIcons
       name  = 'bookmark-check'
       size  = {30}
       color = {'blue'}
    />
</View>

[remisaado]

I have problems with this too! I'm using "logo-youtube" from Ionicons and I want the middle play triangle to be white while the surrounding part is red, however if I add a white backgroundColor there will be a white box around the icon, and changing the padding to 0 does nothing at all.

[douglas-mason]

Also having this issue with circle icons such as play-circle. Tried to add border radius and it doesn't seem to work (on iOS, using props, style, Text or View wrapper, or Icon.Button). So yeah, there's box behind the icon that would be nice to figure out how to not show.

[oblador]

Don't think this is possible with the current implementation I'm afraid :-/

[sangeethanimapp]

did anyone got the solution for the above issue..please let me know..i am facing the same

[lucas-dolsan]

Also having this issue

[Panduss]

I'm also looking for a solution.

[rreina]

I also encountered this issue using NativeBase v2.8.0 which has react-native-vector-icons as dependency.

[likern]

@oblador Is there any plans to change that? Or will it be "as is"? I think an ability to fill color is must have feature. Now it's not possible to do in any way (at least I couldn't find) neither with this repo, nor with React Native component (like imaginable overlay or whatever).

[mdeveloper20]

I also having this problem. Maybe adding a view behind the icon can fix the problem temporary.

[natejenkins]

I found a somewhat hacky work-around for this issue. I'm importing icons from NativeBase so the component is slightly different, but in @dennisbejencev-an's original example to achieve the desired result you can do something like this:

<View>
  <Icon
    type="MaterialCommunityIcons"
    name="bookmark"
    style={{
      color: "white",
      fontSize: 100
    }}
  />
  <Icon
    type="MaterialCommunityIcons"
    name="bookmark-check"
    style={{
      color: "blue",
      fontSize: 100,
      top: 0,
      left: 0,
      position: "absolute"
    }}
  />
</View>

Setting the second Icon to the absolute position 0,0 will overlay it onto the first. Since this example has a filled icon and a checked icon the overlay is perfect. It isn't a general solution since you need two similar icons, but it works in many cases. In situations where the overlay of the two icons doesn't quite line up from you can make one of the icons slightly larger than the other and fiddle around with the positioning to get to something acceptable.

Hope this helps!

[yesw6a]

I also having this problem. Maybe adding a view behind the icon can fix the problem temporary.

Good idea. I will use the solution before author fix the bug, but maybe is a feature. XD

[Mohammed-Salmeen]

<View style={{ backgroundColor: '#fff', borderRadius: 25 }}> <MaterialIcons name = 'bookmark-check' size = {30} color = {'blue'} /> </View> try this out ... give borderRadius: 25 or until hide it. Note: no need for width and height if u already write size={30}

Hope this helps!

[sagarsaurabhssnl]

I have problems with this too! I'm using "logo-youtube" from Ionicons and I want the middle play triangle to be white while the surrounding part is red, however if I add a white backgroundColor there will be a white box around the icon, and changing the padding to 0 does nothing at all.

use reverse attribute

[EKOLX]

Give outer box width and height less than inner. See the example

 <TouchableOpacity
        style={{
          backgroundColor: Colors.white,
          width: 44,
          height: 44,
          borderRadius: 22,
          justifyContent: "center",
          alignItems: "center",
        }}
        onPress={() => console.log("+ pressed")}
      >
        <Ionicons
          style={{
            width: 66,
            height: 66,
          }}
          size={66}
          name="add-circle"
          color={Colors.primary}
        />
      </TouchableOpacity>
      ```