2017-05-27 4 views
0

Wie verwende ich die Property "iconClassName" von FloatingActionButton, um ein Symbol darin anzuzeigen? Ich weiß, wie man ein Icon auf diese Weise zuweist:Verwenden von iconClassName in material-ui FloatingActionButton

Aber das ist nicht, wie ich es tun möchte. Laut den Dokumenten kann ich die Property 'iconClassName' verwenden, um ein Symbol zuzuweisen.

Ich habe den Link zu Material Symbole in der HTML-Datei enthalten:

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

Aber jetzt spielt es keine Rolle, wie ich versuche, das Symbol Namen zuweisen, es nicht zu sehen. Ich habe versucht, diese Kombinationen mit Bindestrichen:

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

Oder mit Unterstrichen:

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

Keiner von ihnen arbeitet. Was ist der richtige Weg, dies zu tun? Vielen Dank.

Antwort

0

Ich denke, der bevorzugte Weg, um es so zu verwenden ist:

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

Wenn iconClassName FloatingActionButton definiert ist ohnehin eine FontIcon im Inneren macht. Es werden nur die Klassennamen angewendet und keine Ligaturen gesetzt. Ich bin mir nicht sicher, ob das ein Fehler in Material-Ui ist.

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

+0

Danke. Ich hatte keine Probleme, es anders zu benutzen, außer für "iconClassName", also bin ich mir nicht sicher, was da zu tun ist. Wie du gesagt hast, könnte es ein Fehler sein. – pentool

Verwandte Themen