Material Design Icons

mervick.github.io/material-design-icons, _(*2)

Material design icons are the official icon set from Google that are designed under the material design guidelines., _(*3)

Installation

Yarn

yarn add @mervick/mdi-icons

NPM

npm install @mervick/mdi-icons --save

Usage

Add to your html page in the head area, _(*4)

<!-- This include bundle of CSS classes with all Material Icons fonts (5 fonts) -->
<link href="css/material-icons.min.css" rel="stylesheet">

You can customize and use only fonts you want:, _(*5)


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


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


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


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


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


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

You can also use fonts from Google Fonts:, _(*6)


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


<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">


<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet">


<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round" rel="stylesheet">


<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp" rel="stylesheet">


<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone" rel="stylesheet">

There 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>


<i class="material-icons-outlined">accessibility</i>
<i class="material-icons-outlined">3d_rotation</i>
<i class="material-icons-outlined">airline_seat_legroom_reduced</i>


<i class="material-icons-round">accessibility</i>
<i class="material-icons-round">3d_rotation</i>
<i class="material-icons-round">airline_seat_legroom_reduced</i>


<i class="material-icons-sharp">accessibility</i>
<i class="material-icons-sharp">3d_rotation</i>
<i class="material-icons-sharp">airline_seat_legroom_reduced</i>


<i class="material-icons-two-tone">accessibility</i>
<i class="material-icons-two-tone">3d_rotation</i>
<i class="material-icons-two-tone">airline_seat_legroom_reduced</i>

CSS classes (preferred)


<i class="mdi mdi-accessibility"></i>
<i class="mdi mdi-3d-rotation"></i>
<i class="mdi mdi-airline-seat-legroom-reduced"></i>


<i class="mdi-outlined mdi-accessibility"></i>
<i class="mdi-outlined mdi-3d-rotation"></i>
<i class="mdi-outlined mdi-airline-seat-legroom-reduced"></i>


<i class="mdi-round mdi-accessibility"></i>
<i class="mdi-round mdi-3d-rotation"></i>
<i class="mdi-round mdi-airline-seat-legroom-reduced"></i>


<i class="mdi-sharp mdi-accessibility"></i>
<i class="mdi-sharp mdi-3d-rotation"></i>
<i class="mdi-sharp mdi-airline-seat-legroom-reduced"></i>


<i class="mdi-two-tone mdi-accessibility"></i>
<i class="mdi-two-tone mdi-3d-rotation"></i>
<i class="mdi-two-tone mdi-airline-seat-legroom-reduced"></i>

Using CSS classes, you can also use additional features such as:, _(*7)


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


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


<i class="mdi mdi-attachment mdi-fw"></i>


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


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


<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>


<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>


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

Lorem ipsum dolor ...

Licenses

Google Material Design Icons fonts are licensed under the Apache License, Version 2.0, _(*8)
Python scripts are licensed under the Apache License, Version 2.0, _(*9)
@mervick/mdi-icons CSS and SCSS files are licensed under the MIT License, _(*10)