Utilisation de iconClassName pour l'interface utilisateur matérielle FloatingActionButton

Question

Comment utiliser l'accessoire 'iconClassName' de FloatingActionButton pour afficher une icône à l'intérieur? Je sais comment attribuer une icône de cette façon:

import IconMenu from 'material-ui/svg-icons/navigation/menu' 
... 
<FloatingActionButton> 
    <IconMenu /> 
</FloatingActionButton> 

Mais ce n'est pas comme ça que je veux le faire. Selon les docs, je peux utiliser l'accessoire 'iconClassName' pour attribuer une icône.

J'ai inclus le lien vers les icônes dans le fichier matériel HTML:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

Mais maintenant, peu importe comment j'essaie d'attribuer le nom de l'icône, il ne se présente pas. J'ai essayé ces combinaisons en utilisant des tirets:

<FloatingActionButton iconClassName='menu' /> 
<FloatingActionButton iconClassName='navigation-menu' /> 
<FloatingActionButton iconClassName='material-icons-menu' /> 
<FloatingActionButton iconClassName='material-icons-navigation-menu' /> 

Ou avec underscores:

<FloatingActionButton iconClassName='navigation_menu' /> 
<FloatingActionButton iconClassName='material_icons_menu' /> 
<FloatingActionButton iconClassName='material_icons_navigation_menu' /> 

Aucun d'entre eux travaille. Quelle est la bonne façon de faire cela? Merci.

Answer 1

Je pense que le meilleur moyen est d'utiliser comme ceci:

<FloatingActionButton> 
    <FontIcon className="material-icons">home</FontIcon> 
</FloatingActionButton> 

Si iconClassName est définie FloatingActionButton rend une FontIcon à l'intérieur de toute façon. Mais il ne fait qu'appliquer les classNames et ne pas mettre de ligatures. Je ne suis pas sûr que ce soit un bug dans le matériel-ui.

https://google.github.io/material-design-icons/