# Material design icons vs font awesome
**URL:** https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615
**Category:** Dashboard
**Created:** [26 June 2019 14:13 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615 "2019-06-26T14:13:16Z")
**Posts on this page:** 1
**Showing post:** 11
### Author:  [@afelix](https://discourse.nodered.org/u/afelix)
#### Post date: [27 June 2019 09:15 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/11 "2019-06-27T09:15:43Z")
> [@Trying\_to\_learn](#):
>
> The `>` is throwing me.
>
> Could someone explain away my confusion?
Back to basics for a moment, do you have the basic understanding of how HTML works? It is a nested structure of _tags_, such as `font`, `img`, `a`, `button`, and so on. These tags are all responsible for a part of the page, or part of a structure. For example, `a` is the anchor tag, and it shows links, `p` is a paragraph and text inside it is formatted as such. All tags are surrounded by `<` and `>`. Meaning `font` becomes ``, which becomes the starting tag. However, the HTML needs to know where this font ends, so an ending tag is required: ``. In structured HTML, all tags need/should need (this discussion is for another topic I'd say) an ending tag. So everything between `` and `` becomes written in that font you set.
When a tag needs more information, for example a CSS class needs to be defined, it is done by adding attributes to the starting tag. An attribute is a _key_, followed by `=`, and then the value. Often that value is a string, which means it gets wrapped in quotes (`""`). To add a link to an `` tag, you use the `href` attribute, that's the _key_: `this link goes to this site`. The text the link has, is contained in between the start and ending tag. That line becomes this: [this link goes to this site](https://discourse.nodered.org/)
Say you have an image, and you want it to be clickable: what you would do is wrap a link around it. To do so you need to nest tags. Instead of wrapping just text inside the start and end tags, you wrap another tag in it: `![the alternative text to show if this image cannot load]()
`. How to actually add an image is beyond the scope of this quick summary.
Back to your problem. When you're working with icons on the dashboard, you're specifying HTML tags for the icon structure. Either using MaterialDesign, or FontAwesome. They come as a `` tag, where a `color` attribute is specified, and inside a nested `` tag which explains the icon that is used. They each use their own way of handling icons. For FontAwesome, you simply set a `class` attribute on the `` with `fa`, followed by the icon you want to use, which for example is `fa-book`.
MaterialDesign on the other hands just sets a `class` attribute as `material-icons`, and the icon you want to use is nested inside as written text. Just like the text of the link as seen before.
This difference is a design choice between MaterialDesign and FontAwesome. Both frameworks decided to pick their own way of doing it, and as a result it is not the same.
> [@Trying\_to\_learn](#):
>
> HTML being so _picky_ I thought would spit the dummy and so not allow the second one.
Now to ease your confusion a bit, take a look at attributes again. An attribute is usually written as `key=value` right? When an attribute is specified as just `key` without the equals sign or the value, the code simply assumes that you meant to say `key=true`.
I hope this helps your understanding a bit on what is happening, and why it doesn't fail as explicit as you would have hoped 🙂 Any follow-up questions, just ask away.
---
_[View the full topic](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615)._