Here is the expected result:

[![enter image description here](https://i.stack.imgur.com/khNHn.png)](https://i.stack.imgur.com/khNHn.png)

[![enter image description here](https://i.stack.imgur.com/dQzVz.png)](https://i.stack.imgur.com/dQzVz.png)

Here is how I did so far:

[![enter image description here](https://i.stack.imgur.com/CUixn.png)](https://i.stack.imgur.com/CUixn.png)

What I can't do is put the SVG icon on the right; next the text, here is the inspected result:

[![enter image description here](https://i.stack.imgur.com/4GFtA.png)](https://i.stack.imgur.com/4GFtA.png)

Moreover, I got an exact black line under when my cursor overlaps the element. 

[![enter image description here](https://i.stack.imgur.com/KtiFl.png)](https://i.stack.imgur.com/KtiFl.png)

And here is my code:

```
<MuiThemeProvider theme={createMuiTheme({
    overrides: {
        MuiSelect: {
            'root': {                         display: 'flex', 
                    alignItems: 'center'
            }
        },
        MuiInput: {
            '&:hover': { 
                    borderBottom: '0px', 
                    borderColor: 'transparent'
            },
            underline: {
                '&:after': { 
                    borderBottom: '0px', 
                    borderColor: 'transparent'
                },
                '&:hover': { 
                    borderBottom: '0px', 
                    borderColor: 'transparent'
                }
            }
        }
    }
})}>
<Select 
    IconComponent={newIcon}
    color={'#f1f1f1'}
    autoWidth={false}
    inputStyle={{
        borderBottom: '0px',
        color: '#2d2d2d', 
        fontFamily: 'Lato',
        fontWeight: 'bold',
        fontSize: '16px', 
        lineHeight: '19px',
    }}
    style={{
        borderBottom: 'none',
        backgroundColor: '#f1f1f1', 
        padding: '12px',
        width: '93px'
    }}
    value={0}
>
    <MenuItem value={0} style={{
        color: '#2d2d2d', 
        fontFamily: 'Lato',
        fontWeight: 'bold',
        fontSize: '16px', 
        lineHeight: '19px',
    }}>+852</MenuItem>
    <MenuItem value={1} style={{
        color: '#2d2d2d', 
        fontFamily: 'Lato',
        fontWeight: 'bold',
        fontSize: '16px', 
        lineHeight: '19px'
    }}>+86</MenuItem>
</Select>
</MuiThemeProvider>

```

and here is my icon:

```
   const newIcon = (props) => {
        return (
        <SvgIcon>
            <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45">
                <path fill="none" fill-rule="evenodd" stroke="#979797" stroke-width="2" d="M17 20l5.467 5.467L27.934 20"/>
            </svg>
        </SvgIcon>
        )
    };

```

Would you kindly advise on how to position the icon correctly, and how to get rid of the bottom line? Thanks.