How to include menu options with custom icons? - unicode

Question

The documentation for react native popup menu mentions how to create menu options with a checkmark
const CheckedOption = (props) => (
)
I want to create menu options with custom icons. I do not have the unicode value for those icons. I created a custom MenuOptionWithIcon component and wrapped the icon and the menu option inside a view.
export class MenuOptionWithIcon
extends React.Component<IMenuOptionProps, {}> {
public static defaultProps: Partial<IMenuOptionProps> = {
disabled: false,
};
public render() {
return (
<View style={PopupMenuStyleSheet.menuOptionWithIcon}>
{this.props.icon}
<MenuOption
{...this.props}
text={this.props.text}
onSelect={this.props.onSelect}
disabled={this.props.disabled}
/>
</View>
);
}
}
But I am not able to apply customStyles to these options now. I want to increase the padding of each of these options so that the tap target is increased. Is this the right way to create a custom menu option with an icon? Or is there a way to get unicode values for the icons that I need? Thanks!
EDIT:
Based on the suggestion in the answer below, I did the following but I now only see the text in my menu option. I don't see the Icon being displayed. onSelect works, text is displayed but the icon is not displayed.
const IconOption = (props) => (
<MenuOption {...props}>
<Icon name={props.iconName} size={30} />
{props.children}
</MenuOption>
);
<MenuOptions customStyles={MenuOptionStyles}>
<IconOption
iconName='md-bookmark'
onSelect={this.onSelectSave.bind(this)}
text={MenuOptionStrings.Save}
/>
</MenuOptions>

Answer 1

for the icons you need special font - use e.g. react-native-vector-icons and then use the same approach as for CheckedOption:
const IconOption = ({iconName, text, ...others}) => (
<MenuOption {...others} >
<Text>
<Icon name={iconName} />
{' ' + text}
</Text>
</MenuOption>
)