How to I make use of react-toolbox icons

Question

I'm using react-toolbox for my project.

I have tried some feature that it has, i.e icon button. and now i need a button with arrow-up icon. i dont know whether it is provided by react-toolbox or not.

<Button icon='arrow-up' floating />

The code above doesnt show any icon on the button

How do I use the arrow-up icon? Any help is appreciated

Answer 1

React Toolbox is a set of React components that implement Google's Material Design specification.

According to the Github page

Roboto Font and Material Design Icons

React Toolbox assumes that you are importing Roboto Font and Material Design Icons.

In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.

Since it uses material-icon, you can get all the icons list from material icons

For the arrow up icon you would use

 <Button icon='keyboard-arrow-up' floating />

Answer 2

If you have problem with icons not showing, you probably forgot to add to the .html file the following link:

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

Check web material.io installation guide: https://material.io/develop/web/docs/getting-started/