ttrss/vendor/mervick/material-design-icons
Andrew Dolgov a22ddb2fe0 move material-icons to composer 2021-02-28 14:53:04 +03:00
..
css move material-icons to composer 2021-02-28 14:53:04 +03:00
demo move material-icons to composer 2021-02-28 14:53:04 +03:00
fonts move material-icons to composer 2021-02-28 14:53:04 +03:00
scripts move material-icons to composer 2021-02-28 14:53:04 +03:00
scss move material-icons to composer 2021-02-28 14:53:04 +03:00
.gitignore move material-icons to composer 2021-02-28 14:53:04 +03:00
Gruntfile.js move material-icons to composer 2021-02-28 14:53:04 +03:00
Gulpfile.js move material-icons to composer 2021-02-28 14:53:04 +03:00
LICENSE move material-icons to composer 2021-02-28 14:53:04 +03:00
README.md move material-icons to composer 2021-02-28 14:53:04 +03:00
bower.json move material-icons to composer 2021-02-28 14:53:04 +03:00
component.json move material-icons to composer 2021-02-28 14:53:04 +03:00
composer.json move material-icons to composer 2021-02-28 14:53:04 +03:00
index.js move material-icons to composer 2021-02-28 14:53:04 +03:00
package.json move material-icons to composer 2021-02-28 14:53:04 +03:00

README.md

Material Design Icons

mervick.github.io/material-design-icons

Material design icons are the official icon set from Google that are designed under the material design guidelines.

In the official package the icons uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name.

In this repository also implemented the ability to use the icons in the bootstrap-style, like in glyphicon, font-awesome or ionicons.

Installation

You may install this package using Component, Composer, Bower or npm:

  • Component: component install mervick/material-design-icons
  • Composer: composer require mervick/material-design-icons
  • Bower: bower install bootstrap-material-design-icons
  • npm: npm install bootstrap-material-design-icons

Usage

Add to your html page in the head area

<link rel="stylesheet" href="css/material-icons.css">

Where are two ways to use:

  • Ligature, this one is awesome but have some troubles
<i class="material-icons">accessibility</i>
<i class="material-icons">3d_rotation</i>
<i class="material-icons">airline_seat_legroom_reduced</i>
  • Bootstrap-style,
<i class="mdi mdi-accessibility"></i>
<i class="mdi mdi-3d-rotation"></i>
<i class="mdi mdi-airline-seat-legroom-reduced"></i>

Using bootstrap-style, you can also use additional features such as in Font Awesome:

<!-- Inverse -->
<i class="mdi mdi-attachment mdi-inverse"></i>

<!-- Animated --> 
<i class="mdi mdi-attachment mdi-spin"></i>
<i class="mdi mdi-attachment mdi-pulse"></i>

<!-- Fixed width -->
<i class="mdi mdi-attachment mdi-fw"></i>

<!-- Bordered -->
<i class="mdi mdi-attachment mdi-border"></i>

<!-- Pulled -->
<i class="mdi mdi-attachment pull-left"></i>
<i class="mdi mdi-attachment pull-right"></i>

<!-- Sizes -->
<i class="mdi mdi-attachment mdi-lg"></i>
<i class="mdi mdi-attachment mdi-2x"></i>
<i class="mdi mdi-attachment mdi-3x"></i>
<i class="mdi mdi-attachment mdi-4x"></i>
<i class="mdi mdi-attachment mdi-5x"></i>

<!-- Rotations -->
<i class="mdi mdi-attachment mdi-rotate-90"></i>
<i class="mdi mdi-attachment mdi-rotate-180"></i>
<i class="mdi mdi-attachment mdi-rotate-270"></i>

<!-- Flips -->
<i class="mdi mdi-attachment mdi-flip-horizontal"></i>
<i class="mdi mdi-attachment mdi-flip-vertical"></i>

<!-- In lists -->
<ul class="mdi-ul">
    <li><i class="mdi-li mdi mdi-keyboard-arrow-right"></i>Lorem ipsum dolor ...</li>
</ul>

##License