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,
}

[themeadery]

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?

[rhuankarlus]

Same problem here folks, any news?

[brenomaiacosta]

Hello guys! Previously I presented a possible solution, but it is not a scalable solution as already mentioned. So I'm making a possible solution available to you. Hope this helps.

The secret is in defining the alignments in the parent component (TouchableOpacity), through "alignItens" and "JustifyContent".

Here is a possible solution: https://github.com/brenomaiacosta/solutionIssueRemovePaddingFromIcon774/blob/main/Solution.txt

Below is an example of several types of button content alignments:

[timfbfbfbfb]

I encountered the same problem and I ended up using a wrapper to set the width and height to make the icon centered.

The wrapper component

import React from 'react';

function Icon({ size, style, iconClass, ...otherProps }) {
    const IconClass = iconClass;
    return (
        <IconClass
            {...otherProps}
            size={size}
            style={{ ...style, width: size, height: size }}
        />
    );
}

export default Icon;

An example using the wrapper component

import AntIcon from 'react-native-vector-icons/AntDesign';

function SomeComponent() {
    return (
        <Icon
            iconClass={AntIcon}
            name="setting"
            color="#000"
            size={20}
        />
    );
}

[joao-vasconcelos]

I just use display: flex; on the parent element and it works.

[TowhidKashem]

I use expo vector icons which I believe is based on react-native-vector-icons or vice versa. Anyway wrapping the icon in a view and setting it's width to the size of the icon worked for me:

    <View style={{ width: size }}>
      <Ionicons
        name={name}
        size={size}
        color={color || theme.primaryColor}
        style={style}
      />
    </View>

If you're dealing with extra vertical padding then you may also need to set the height of the view to the same size.

[jgillick]

I've just created a tool to remove padding around icon sets automatically. It requires you to create a new icon set, but it might be helpful: https://github.com/jgillick/IconsetCropper