React-native-vector-icons: Remove padding from Icon

[nzwnabdulwahid]

Good day everyone!
I am currently trying to remove padding from the Icon but it seems like what ever I did the padding is still there.

I am trying to push both of the arrow at the end of the container and this is my current code.

<View style={{zIndex:10, position: 'absolute', width:20, padding:0, margin:0, backgroundColor:'rgba(0,0,0,0)', justifyContent: 'space-between',alignSelf:'center'}}> <Icon name={"md-arrow-dropdown"} size={35} color="white" style={{padding:0, margin:0, backgroundColor:'red' }} /> <Icon name={"md-arrow-dropup"} size={35} color="white" style={{padding:0, margin:0, backgroundColor:'green'}} /> </View>

How can I achieve that ?

[sryze]

Same problem, tried padding: 0, paddingTop: 0, etc - none of them worked

import Icon from 'react-native-vector-icons/Ionicons';

<TouchableOpacity>
    <Icon name="ios-close" size={30} style={styles.fileDeleteIcon} />
</TouchableOpacity>

fileDeleteIcon: {
    flex: 0,
    width: 20,
    height: 20,
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    backgroundColor: '#e24c4b',
    color: 'white',
    margin: 0,
    padding: 0,
    paddingTop: 0,
}

[phorensic]

I have the same issue with a Materialcons icon. Forgive me for not setting the backgroundColor to red to show it, but if I do you can clearly see padding at the bottom. No amount of styling will recenter or remove/adjust the padding. I am placing this info icon at the end of text. It's not aligned and in a block of text it makes that particular line of text taller than the rest. The only way I can solve this is to make the icon smaller than the surrounding text, but then the icon is way too small and it is still not vertically aligned.

I believe I know why this is occurring. It's because these are not graphics, they are basically fonts being placed to look like a graphic. Still, the documentation says it is possible to style them to move them around, but I am finding that not to be the case such as your two documented examples above. Also, other solutions provided by doing some Google searching have not worked. Such as wrapping them in a view.

Edit: I was finally able to solve my problem by getting the icon out of a Text element that was several layers up. I had to break up all my sections of text into many different Text containers. Now it is only wrapped by a View and I can do whatever I want with it. Still new at everything, so I have to get creative with Views to place it where I want.

[luanccp]

I have the same error here. I was thinking, maybe is a default character padding. What do you think about?

<MaterialCommunityIcons name="plus-circle" size={40} color={colors.primary} backgroundColor="#3b5998" style={{margin:0, padding:0}} />

[brenomaiacosta]

Try placing your component inside a "View" by passing the backgroundColor setting to it, then use negative numbers in the margin and padding (MaterialCommunityIcons) until you adjust the space between the edges. Ex:

[brenomaiacosta]

phorensic in your case you can use (borderRadius: 50) after adjusting the spaces, as I explained for the luanccp.

Guys, I hope I collaborated with you :-)

[luisgurmendezMLabs]

This is not a scalable solution

[Bsingh2697]

U guys can use textAlign : center|left|right|top|bottom whatever suits u

[hengkx]

same problem.

[MichaelKim39]

Also having this issue, any help?