Font Icons

The FontIcon component is used to render different font libraries with the material design specs. The default font icon library used is the Material Icons.

Starting from v1.1.0, a dense spec has been added to icons. This will automatically reduce the icon size from 24px to 20px when viewing the website when the desktop media query matches. This behavior can be disabled by setting $md-font-icon-include-dense to false if this is not desired behavior.

The FontIcon component is used to work with hopefully all existing font icon libraries. By default every icon in this library will user material-icons to be displayed but you can change the icon with the iconClassName prop.

To be able to display any icons at all, you will need to manually include the font library with a <link> or anything else for it to be displayed.

Font icons from Material Icons


Font icons from FontAwesome

The FontIcon also has support to gain theme, disabled, or error colors as well as inheriting colors from its parents.