Icon Misaligned on Button When Using FontAwesome Icon

[KiddoV]

Current behaviour

Icon misaligned when I use button with FontAwesome icons.

Expected behaviour

Icon should aligned perfectly in center like normal one.

How to reproduce?

import { Appbar, Avatar, Text } from "react-native-paper";
import FontAwesome6 from '@expo/vector-icons/FontAwesome6';

[...]
<Appbar.Action icon={(props)=><FontAwesome6 name="plus" iconStyle="solid" {...props} />} onPress={() => {}} />

Preview

[...]
headerRight: (props) => (
    <Appbar.Action icon={(props)=><FontAwesome6 name="plus" iconStyle="solid" {...props} />} onPress={() => {}} />
)

My works around is to add a View with alignItems: center

headerRight: (props) => (
    <Appbar.Action icon={(props)=><View style={{alignItems: "center"}}><FontAwesome6 name="plus" iconStyle="solid" {...props} /></View>} onPress={() => {}} />
)

Your Environment

software	version
ios	N/A
android	N/A
react-native	0.76.7
react-native-paper	5.13.1
node	Node.js v20.10.0
npm or yarn	10.4.0
expo sdk	0.22.19

[lukewalczak]

Hey @KiddoV, it looks like the plus icon from FontAwesome package can be a bit misaligned – I've compared FontAwesome6, FontAwesome, Ionicons and Feather and only first two are not centered:

FontAwesome6	FontAwesome	Ionicons	Feather