SolvedNativeBase Can't use icon from a different source provided by `theme` attribute

I don't know but I still am not able to do this.
This is my code below:
<Icon name={"magnify"} theme={{iconFamily: "MaterialCommunityIcons"}} />
But I get a '?' sign instead.

I've read the code; the documentation but I've not found a way out.

NB. I don't want to do <MaterialCommunityIcons ... > because the other style options and properties are lost. (not displaying as should, either with a different size or color, especially if I'm using another icon in a tab, the tab icon color effects are lost)

react-native-cli: 2.0.1
react-native: 0.44.3
native-base: 2.1.4

Screenshot of emulator/device

screenshot_20170609-142911

I'm developing for Android, I can't confirm on ios

9 Answers

✔️Accepted Answer

@peterchibunna There is no theme property in Icon.
One way of adding custom iconFamily to Icon right now is
<StyleProvider style={getTheme({iconFamily: "MaterialCommunityIcons"})}> <Icon name="magnify" /> </StyleProvider>
where StyleProvider, getTheme both are imported from native-base.
Try it out and let us know

Other Answers:

I made an easy custom component for this to work.

import React from 'react';
import { Icon, StyleProvider } from 'native-base';
import getTheme from '../native-base-theme/components';

export class WrapperIcon extends React.Component {
  render() {
    return (
        <StyleProvider style={getTheme({ iconFamily: this.props.family })}>
            <Icon {...this.props} />
        </StyleProvider>
    );
  }
}

Use like this:

<WrapperIcon family="Ionicons" ios="ios-clipboard-outline" android="md-clipboard" />

More Issues: