GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → mervick → Material Design Icons

mervick / Material Design Icons

Licence: mit
Material Design Icons

Labels

cssmaterialiconsgoogle-material

Projects that are alternatives of or similar to Material Design Icons

La Capitaine Icon Theme
La Capitaine is an icon pack designed to integrate with most desktop environments. The set of icons takes inspiration from the latest iterations of macOS and Google's Material Design.
Stars: ✭ 1,858 (+1964.44%)
Mutual labels:  material, icons, google-material
reiconify
Convert SVG icons to React components eg.: https://ambar.li/reiconify/md.icons/#/Browse
Stars: ✭ 17 (-81.11%)
Mutual labels:  material, icons
la-capitaine-android
📱 La Capitaine icons on Android!
Stars: ✭ 17 (-81.11%)
Mutual labels:  icons, google-material
Mui
Lightweight CSS framework
Stars: ✭ 4,462 (+4857.78%)
Mutual labels:  material, google-material
Rplibs
Refs.cn 原型设计元件库，基于Axure RP 10/9/8，支持 Android、Apple、Windows、微信，移动、桌面平台的应用和网站原型设计。五年历程 2.6k+ star，感谢大家使用。
Stars: ✭ 2,622 (+2813.33%)
Mutual labels:  material, icons
Material Admin
Free Material Admin Template
Stars: ✭ 219 (+143.33%)
Mutual labels:  material, google-material
Blueprint
Free, feature-rich, easily customizable Android dashboard for icon packs
Stars: ✭ 389 (+332.22%)
Mutual labels:  material, icons
Styled Icons
💅 Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components
Stars: ✭ 1,878 (+1986.67%)
Mutual labels:  material, icons
Android Iconics
Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.
Stars: ✭ 4,916 (+5362.22%)
Mutual labels:  material, google-material
Android Dev
⚡️ Curated list of resources for Android app development. Prepare for battle!
Stars: ✭ 44 (-51.11%)
Mutual labels:  material, icons
Youtube Play Icon
Material style morphing play-pause drawable for Android
Stars: ✭ 57 (-36.67%)
Mutual labels:  material, icons
Android Switchicon
Google launcher-style implementation of switch (enable/disable) icon
Stars: ✭ 2,337 (+2496.67%)
Mutual labels:  material, icons
Iconshowcase Dashboard
A full-of-features, easy-to-customize, free and open source, Material Design dashboard for icon packs.
Stars: ✭ 197 (+118.89%)
Mutual labels:  material, icons
vs-material-icons-generator
This plugin will help you to set material design icons to your Xamarin projects In Visual Studio.
Stars: ✭ 50 (-44.44%)
Mutual labels:  icons, google-material
A File Icon Idea
Atom File Icons plugin for IntelliJ IDEA products
Stars: ✭ 90 (+0%)
Mutual labels:  material, icons
Material
Material Design for Bootstrap 4
Stars: ✭ 3,169 (+3421.11%)
Mutual labels:  material, google-material
Material.avalonia
Material design in AvaloniaUI
Stars: ✭ 126 (+40%)
Mutual labels:  material, google-material
Material Color
🔆 The colour palette, based on Google's Material Design, for use in your project.
Stars: ✭ 135 (+50%)
Mutual labels:  material, google-material
Material Axure Library
An Axure widget library based on Google Material Design.
Stars: ✭ 490 (+444.44%)
Mutual labels:  material, google-material
Mahapps.metro.iconpacks
Awesome icon packs for WPF and UWP in one library
Stars: ✭ 1,157 (+1185.56%)
Mutual labels:  material, icons
View All Similar Projects ➔

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.

Installation

Yarn

yarn add @mervick/mdi-icons

NPM

npm install @mervick/mdi-icons --save

Usage

Add to your html page in the head area

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

<!-- base CSS classes (required) -->
<link href="css/material-icons-base.min.css" rel="stylesheet">

<!-- loads Material Icons Regular font -->
<link href="css/material-icons-regular.min.css" rel="stylesheet">

<!-- loads Material Icons Outlined font -->
<link href="css/material-icons-outlined.min.css" rel="stylesheet">

<!-- loads Material Icons Round font -->
<link href="css/material-icons-round.min.css" rel="stylesheet">

<!-- loads Material Icons Sharp font -->
<link href="css/material-icons-sharp.min.css" rel="stylesheet">

<!-- loads Material Icons Two Tone font -->
<link href="css/material-icons-two-tone.min.css" rel="stylesheet">

You can also use fonts from Google Fonts:

<!-- base CSS classes (required) -->
<link href="css/material-icons-base.min.css" rel="stylesheet">

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

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

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

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

<!-- loads Material Icons Two Tone font -->
<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
<!-- Material Icons Regular font -->
<i class="material-icons">accessibility</i>
<i class="material-icons">3d_rotation</i>
<i class="material-icons">airline_seat_legroom_reduced</i>

<!-- Material Icons Outlined font -->
<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>

<!-- Material Icons Round font -->
<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>

<!-- Material Icons Sharp font -->
<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>

<!-- Material Icons Two Tone font -->
<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)
<!-- Material Icons Regular font -->
<i class="mdi mdi-accessibility"></i>
<i class="mdi mdi-3d-rotation"></i>
<i class="mdi mdi-airline-seat-legroom-reduced"></i>

<!-- Material Icons Outlined font -->
<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>

<!-- Material Icons Round font -->
<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>

<!-- Material Icons Sharp font -->
<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>

<!-- Material Icons Two Tone font -->
<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:

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

Licenses

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].