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 <font>, which becomes the starting tag. However, the HTML needs to know where this font ends, so an ending tag is required: </font>. In structured HTML, all tags need/should need (this discussion is for another topic I'd say) an ending tag. So everything between <font> and </font> 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 <a> tag, you use the href attribute, that's the key: <a href="https://discourse.nodered.org/">this link goes to this site</a>. The text the link has, is contained in between the start and ending tag. That line becomes this: this link goes to this site
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: <a href="https://discourse.nodered.org/"><img alt="the alternative text to show if this image cannot load"></img></a>. 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 <font> tag, where a color attribute is specified, and inside a nested <i> 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 <i> 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.
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.
