Icon
Place vector icons anywhere using an icon font.
This component is using the fantastic Material Icons icon font, a project by Google. Altogether Material Icons provides more than 900 symbols and glyphs for web-related actions. Icon fonts are great, because they enable you to easily change color, size and more via CSS. They are scalable vector graphics, which means that they look great on high-resolution displays.
Legacy users will need Font Awesome as FatKit was switched to Material Icons ion April 2016.
Usage
To apply this component, add any .material-icons
class to an <i>
or <span>
element. Et voilĂ , you have a vector icon, which inherits size and color just like your text does.
Examples
- settings Uses the
.material-icons
class andsettings
text content - person Uses the
.material-icons
class andperson
text content - home Uses the
.material-icons
class andhome
text content - launch An icon in a link
Markup
<!-- This is an icon -->
<i class="material-icons">person</i>
<!-- This is an icon in a link -->
<a href=""><i class="material-icons">mail_outline</i> ...</a>
More examples
Button group
This example shows a group of buttons from the Button component with icons inside each button.
Example
Button dropdown
This example shows a button which is split into a standard action to the left and a dropdown toggle on the right, using the Dropdown component.
Example
Blockquotes
This example shows a blockquote from the Base component with a large quote icon. It also uses the .f-align-left
class from the Utility component.
Example
format_quoteThe <blockquote> element defines a long quotation which also creates a new block by inserting white space before and after the blockquote element.
Size modifiers
Add the .f-icon-small
, .f-icon-medium
or .f-icon-large
class to an icon to make the it larger.
- home This is the default size.
- home This icon uses the
.f-icon-small
class. - home This icon uses the
.f-icon-medium
class. - home This icon uses the
.f-icon-large
class.
Spin modifier
Add the .f-icon-spin
class to create animated spinning icons.
- autorenew Spinner icon for loading content ...
- settings_backup_restore Refresh icon for refreshing content (animation reversed) ...
Markup
<i class="material-icons f-icon-spin">autorenew</i>
<i class="material-icons f-icon-spin f-icon-reverse">settings_backup_restore</i>
Icon hover
Use the modifier .f-icon-hover
class to use an anchor as an icon, applying a hover effect and removing the link underline.
Example
phone_android phone_iphone tablet_android tablet_macMarkup
<a href="" class="material-icons f-icon-hover">phone_android</a>
Icon button
Use the modifier .f-icon-button
class to create an icon button, which can be used perfectly for social icons.
Example
phone_android phone_iphone tablet_android tablet_macMarkup
<a href="" class="material-icons f-icon-button">phone_android</a>
Icon mapping
You can find all available .material-icons
text content provided by Google Material Icons at that link.