oblador/react-native-vector-icons

Icon Heights....

bnbon opened this issue · 3 comments

bnbon commented

Hi, is it just my implementations, or do the icons have badly misaligned heights or positions on the vertical axis? I have three icons in a button next to eachother, and the button only shows the icon and the camera icon for example is off the center and a different height to the image icon.

Im using the material outline icons, is anyone else encountering it, and if so did you find a fix?

I just think the icons arent as uniform as we might home, perhaps MUI has spoiled me, but I am grateful for the effort from people too.

Another one that looks a bit too shallow is account-group

johnf commented

@bnbon Can you share your code or create a snack I can test with.

bnbon commented

It's an extremely simple layout, but the icon for the camera doesnt match the other height, this is the case for many icons, they should be standardised heights I think

import { View } from 'react-native';
import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
        
<View style={styles(theme).iconContainer}>
  <MaterialDesignIcons
    name="file-gif-box"
    size={24}
    color="grey"
    onPress={() => console.log('Icon 1 pressed')}
  />
  <MaterialDesignIcons
    name="image-outline"
    size={24}
    color="grey"
    onPress={() => console.log('Icon 2 pressed')}
  />
  <MaterialDesignIcons
    name="camera-outline"
    size={24}
    color="grey"
    onPress={() => console.log('Icon 3 pressed')}
  />
</View>

The styles;

iconContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      marginHorizontal: theme.spacing(1),
    }
johnf commented

@bnbon Thanks!

I pulled the font open in Font Forge and the camera isn't aligned in the underlying font. Compare

image
image

We get this font straight from the @mdi/font package at https://github.com/Templarian/MaterialDesign-Webfont, which comes from https://github.com/Templarian/MaterialDesign

You could file a bug there, but I suspect it's because they want the icons to stay still when you swap it out with the other variants
image