question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Material Icons not showing

See original GitHub issue

Hi, I’m trying to show an iconbutton with material icons but it shows ? . After following all the steps in the docs I don’t what I missing. Steps that I follow:

  1. Added:
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'MaterialCommunityIcons.ttf' ] // Name of the font files you want to copy
]

to android/app/build.gradle

  1. Then added Paper Provider to my App.tsx like
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { MenuLateral } from './src/navigator/MenuLateral';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import MaterialIcons  from 'react-native-vector-icons/MaterialIcons';

const App = () => {
  return (
    <PaperProvider
        settings={{
          icon: props => <MaterialIcons {...props} />,
        }}
        theme={DefaultTheme} // -> this is differente from the docs cause {this.state.theme} said that 'this' is undefined
      >
        <NavigationContainer>
      {/*<StackNavigator />*/}
      <MenuLateral />
    </NavigationContainer>
      </PaperProvider>
  );
}

export default App;
  1. In my component I added like
...
 <View>
        <IconButton icon="more_vert" size={20} onPress={() => console.log('Pressed')}  />
 </View>

But I’m getting this error invalid prop name of value “more_vert” supplied to icon expected one of: [list of icons]. But more_vert is part of material icons. So I don’t know what I missing thanks in advance

Additional info:

“react-native-paper”: “^4.9.2”, “react-native-vector-icons”: “^8.1.0” “react-native”: “0.64.1”,

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:6

github_iconTop GitHub Comments

2reactions
viv3kkcommented, Aug 29, 2021

not working with “react-native”: “0.64.2” react-native-vector-icons": “^8.1.0”, “react-native-paper”: “^4.9.2”,

0reactions
github-actions[bot]commented, Oct 1, 2021

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Material Design Icons not showing in browser - Stack Overflow
I'm trying to host the Google Material Design icon set for my website however I cannot get the icons to show in Chrome...
Read more >
Google Material Icon not Showing. : r/learnprogramming - Reddit
I am trying to add an icon to a page but it's not showing. ... Material Icons uses a different reference for every...
Read more >
outlined icons not working · Issue #1263 - GitHub
I am trying to use the outlined version of notifications. I can use the normal filled version but the outline version is not...
Read more >
New icons from google material icons not showing
The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:
Read more >
Material icons not rendering properly in chrome due to font ...
It seems to be that one of the Kannada fonts installed through chrome web store is causing the material icons to break.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found