Material-UI Icons
Learn more about Material-UI icons, Material Design icons and Argon Dashboard icons.
Material Design Icons
As our friends from Material-UI, we’ve used for the icons, the
@material-ui/icons
package. It comes with almost all of the icons from Material Design:
https://material.io/resources/icons/
Check the package here: https://www.npmjs.com/package/@material-ui/icons
Check the official Material-UI docs here: https://material-ui.com/components/icons/
Nucleo
Argon Dashboard Material-UI comes with 100 custom icons made by our friends from Nucleo App. The official package contains over 25000 icons which are looking great in combination with Argon Dashboard Material-UI. Make sure you check all of them and use those that you like the most.
Usage
In order to use this icons on your page you will need to include the
following script in the
<head>
section of your page before the theme’s main style:
Initialization
Start placing icons in your React components. We recommend using a
consistent HTML element, like
<i>
.
Find the right icon and learn how to reference it in your markup.
You need to know two bits of information to reference an icon:
-
its name, prefixed with
ni ni-
and - the style you want to use’s corresponding prefix.
Icons
Want more icons? Increase your collection by choosing more icon examples from Nucleo App website: Go to Nucleo App
Font Awesome 5
Optionally, Argon Dashboard Material-UI comes with Font Awesome which means 3000+ more vector icons made for you to use.
Usage
Initialization
Start placing icons in your React components. We recommend using a
consistent HTML element, like
<i>
.
Find the right icon and learn how to reference it in your markup.
You need to know two bits of information to reference an icon:
-
its name, prefixed with
fa{type} fa-
and - the style you want to use’s corresponding prefix.
NOTE:
{type}
can
be one of
s
(solid),
r
(regular),
l
(light),
d
(duotone), or
b
(brands).
Icons
Get the icon you need on the official website: