How to use the react-native-vector-icons/Ionicons.Button function in react-native-vector-icons

import client from '../../graphql/client';

import finishSearch from '../../graphql/mutations/finishSearch';
import SEARCH_HISTORY_ADD from '../../graphql/mutations/local/searchHistoryAdd';
import searchTerm from '../../graphql/queries/local/searchTerm';
import changeSearchTerm from '../../graphql/mutations/local/changeSearchTerm';

const Wrapper = styled.View`
  flex: 1;
  flex-direction: row;
  align-items: center;
  margin-right: 16;
`;

const Icons = styled(Ionicons.Button).attrs(() => ({
  color: '#fff',
  size: 30,
  backgroundColor: 'transparent',
}))``;

const SearchInput = styled.TextInput.attrs(() => ({
  clearButtonMode: 'always',
  autoFocus: true,
  placeholderTextColor: 'rgba(255, 255, 255, 0.38)',
  underlineColorAndroid: 'transparent',
  selectionColor: '#fff',
  returnKeyType: 'search',
}))`
  flex: 1;
  background-color: transparent;
  border-radius: 5.5;

flex-direction: row;
  align-items: center;
  margin-right: ${Platform.OS === 'ios' ? 2 : 16};
  margin-left: ${Platform.OS === 'ios' ? 2 : 0};
`;

const Title = styled.Text`
  flex: 1;
  text-align: ${Platform.OS === 'ios' ? 'center' : 'left'};
  padding-left: ${Platform.OS === 'ios' ? 0 : 32};
  font-size: 17;
  color: #fff;
  font-weight: 600;
`;

const Icons = styled(Ionicons.Button).attrs(() => ({
  color: '#fff',
  size: 25,
  backgroundColor: 'transparent',
  iconStyle: { marginRight: 0 },
}))`
  padding: 0;
`;

const SearchIcon = styled(Icons).attrs(() => ({
  name: Platform.OS === 'ios' ? 'ios-search' : 'md-search',
}))``;

const FilterIcon = styled(Icons).attrs(() => ({
  name: 'ios-funnel-outline',
}))``;