Icon Heights....

[bnbon]

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]

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

[bnbon]

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]

@bnbon Thanks!

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

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