Menu
There are two ways to use Materilize Icon:
<i class="mdi-action-settings"></i><i class="material-icons">settings</i><i class="mdi-action-settings"></i> I understand how this first method works. This works as css is defined below:
.mdi-action-settings:before {
content: "\e672";
}
Now my question is how the second method <i class="material-icons">settings</i> works?
Here is the URL to see Materialize Icons
951
That's how Google's Material Icons work. The string “face” here literally turns into an icon of a face. Then we can, through the power of magical ligatures, turn that text into an icon. That happens automatically when the font-family is set to one that does ligature icons, like Material Icons.
Licensing. We have made these icons available for you to incorporate them into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.
Material Design Icons are available in five styles. The icons are crafted based on the core design principles and metrics of Material Design guidelines. Our icons are free for everyone to use. It's available under Apache license version 2.0.
Materialize CSS contains 932 material design icons from Google. These icons can be downloaded directly from the Material Design specs. You have to put the name of the icon in the class of an HTML <i> element to use the icon. You can use the following classes to control the size of an icon.
We have included 932 Material Design Icons courtesy of Google. You can download them directly from the Material Design specs. To be able to use these icons, you must include this line in the <head> portion of your HTML code
Additionally, a single underlying responsive system across all platforms allow for a more unified user experience. We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.
Checkout what people are creating with Materialize. Get inspired by these beautiful sites and you can even submit your own website to be showcased here. Take a look at our official themes for Materialize.
This is something called ligatures. Take a look at this page that explains how to enable them in CSS.
Long story short, if you enable it, you tell the browser to look for letter combinations that should render in another way. An example is shown here. Some special fonts (like in materializecss or the ones you create in icomoon.io) just use this feature with words to render icons instead of combined letters. If the browser can't handle ligatures, then it gracefully falls back to the literal word, instead of an empty space.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
