React-native-paper: use MaterialCommunityIcons instead of MaterialIcons

[alikazemkhanloo]

Describe the feature

Use MaterialCommunityIcons instead of MaterialIcons by default in all the components that take the icon prop.

Motivation

I found out MaterialIcons lacks a lot of icons like logout of thumb-up-outline. But MaterialCommunityIcons looks like MaterialIcons and also have lots of other useful icons. Is there a reason you chose MaterialIcons? at least we can let the devs to select their preferences.

[Zefau]

I wrote a component for myself to use all the sets from react-native-vector-icons. Can probably be optimized, but currently looks like:

import React from 'react'
import { View, StyleSheet } from 'react-native'

import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import FontAwesome from 'react-native-vector-icons/FontAwesome'

let Icons = {
    MaterialIcons,
    MaterialCommunityIcons,
    FontAwesome,
}


export default class Icon extends React.Component
{
    static defaultProps = {
        size: 40,
    }

    render()
    {
        let { icon, size, style, backgroundColor, textColor, color, onPress } = this.props

        let iconSet = 'MaterialIcons'
        if (icon.indexOf('|') > -1) [ iconSet, icon ] = icon.split('|') // this.props.icon may contain icon set by defining "iconSet|icon"

        backgroundColor = backgroundColor || 'transparent'
        textColor = color || (textColor || '#525252')

        let TagName = Icons[iconSet]
        return(

<View
    style={[
        {
            width: size,
            height: size,
            borderRadius: size / 2,
            backgroundColor,
        },
        styles.container
    ]}>

    <TagName name={icon} size={size * 0.6} color={textColor} style={style} onPress={onPress} />
</View>

        )
    }
}

Can be used by <Icon icon="android" /> (which uses MaterialIcons as default) or <Icon icon="MaterialCommunityIcons|android-head" /> (which uses MaterialCommunityIcons).
@satya164 Maybe you'll find is useful to use

[connercms]

you can render any icon you want from react-native-vector-icons by passing it as a prop

example

<IconButton 
icon={({ size, color}) => (
    <MaterialCommunityIcons 
    name={'logout'} 
    size={size} 
    color={color}/>
)} 
onPress={this.onPress}
/>

[alikazemkhanloo]

Thank you, I didn't know that icon prop can take size and color as props. But yet why sticking to MaterialIcons instead of the community one?

[satya164]

We'll switch to MaterialCommunityIcons in 3.0.

[formatlos]

would be great if there's a setting to let the developer decide which one to use. I know that you always can pass a function for providing a custom icon, but this gets quite verbose.

[jayu]

I'm working on it :)