Mirrors/MaterialDesign
2
0
Fork 0
mirror of https://github.com/Templarian/MaterialDesign.git synced 2026-03-05 08:04:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Deprecate old docs.

Browse Source
This commit is contained in:
Austin Andrews
2018-09-19 23:54:10 -05:00
committed by GitHub
parent bb7cd724dd
commit 82b0dcdecd
1 changed files with 3 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

381
site/getting-started.savvy
View File

@@ -1,382 +1,7 @@
@title Getting Started
@previewBell(){
<svg style="width:24px;height:24px;">
<path fill="#6F6F6F" d="M14 20C14 21.1046 13.1046 22 12 22C10.8954 22 10 21.1046 10 20L14 20ZM12 2C12.5523 2 13 2.44772 13 3L13 4.08298C15.8377 4.55905 18 7.02702 18 10L18 16L21 19L3 19L6 16L6 10C6 7.02698 8.1623 4.55902 11 4.08294L11 3C11 2.44772 11.4477 2 12 2Z"></path>
</svg>
}
@previewOverlay(){
<svg style="width:24px;height:24px;">
<path fill="#000" d="M12 4C14.2091 4 16 5.79086 16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4ZM12 14C16.4183 14 20 15.7909 20 18L20 20L4 20L4 18C4 15.7909 7.58172 14 12 14Z"></path>
<path fill="#D74933" d="M12 0C18.6274 0 24 5.37259 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37259 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47716 2 12C2 14.4013 2.84636 16.6049 4.25705 18.3287L18.3287 4.25706C16.6049 2.84637 14.4013 2 12 2ZM12 22C17.5228 22 22 17.5228 22 12C22 9.59873 21.1536 7.39514 19.7429 5.67127L5.67127 19.7429C7.39514 21.1536 9.59873 22 12 22Z"></path>
</svg>
}
@download(text, url){
<button class="btn" onclick="window.location = '@url'" style="vertical-align:top;background:transparent;border:0;color:#333;">
<svg>
<path fill="#2196F3" d="M 5,3L 19,3L 20.7359,6L 20.7304,6C 20.9018,6.29149 21,6.63428 21,7L 21,19C 21,20.1046 20.1046,21 19,21L 5,21C 3.89543,21 3,20.1046 3,19L 3,7C 3,6.638 3.09618,6.29846 3.26437,6L 3.26135,6L 5,3 Z M 5.57294,4L 5,5L 5,5L 19,5L 18.4303,4L 5.57294,4 Z M 7,12L 12,17L 17,12L 14,12L 14,10L 10,10L 10,12L 7,12 Z "></path>
</svg>
@text
</button>
}
@boostrapInfo(){
<div class="boostrap-specific">
<a href="/bootstrap">
<span>Bootstrap</span>
<small>Getting Started</small>
</a>
</div>
}
# @title
This document has been moved over to the dev server as we write out the new documentation.
@boostrapInfo() There are many different ways you can consume the Material Design Icons in your projects. The most common uses are listed below. Bootstrap has a separate guide that can be viewed [here](/bootstrap).
[View the Dev Server's new Documentation](https://dev.materialdesignicons.com/getting-started)
## Webfont @download(Download the Webfont, https://github.com/Templarian/MaterialDesign-Webfont/archive/master.zip)
For those targeting the web your best option is to use the webfont (npm `npm install @mdi/font` or bower `bower install mdi`). Files should match the file structure below.
```text File Structure
fonts
/materialdesignicons-webfont.eot
/materialdesignicons-webfont.svg
/materialdesignicons-webfont.ttf
/materialdesignicons-webfont.woff
/materialdesignicons-webfont.woff2
css
/materialdesignicons.min.css - Minified CSS
/materialdesignicons.min.css.map - Developer Tools Map
preview.html - Preview the font files
```
To reference the icons add the line below into the `head` tag.
```html Reference the CSS
<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />
```
To use the icons inline you can use the syntax below.
```html Webfont Example
<i class="mdi mdi-bell"></i> <!-- bell -->
```
@previewBell()
From version 1.6.80+, the `mdi` class will no longer alter styles of the element it is applied to and will only alter the styles of the `:before` pseudo element where the icon is inserted. This means it is now possible to apply icons directly to elements without key styles such as `font-family` being overridden. As you no longer need to use an aditional element (such as `i`), your HTML can be more semantically correct.
```html Semantic Icon Example
<a class="mdi mdi-home" href="/">Home</a>
```
This change should not affect any existing icons other than rare cases where the `mdi` class is inherited by the icon element from a parent. If you are having issues please refer to the Iconsets webfont feature below which explains this in more detail and shows how it can be fixed. If this does not solve the problem feel free to open a new [issue](https://github.com/Templarian/MaterialDesign/issues) on github with the title 'Broken Icons After Update' outlining the code which no longer works.
### Webfont features
The webfont provides several additional helper classes which can be used to quickly display icons in a certain way.
#### Font Size
The classes `.mdi-18px`, `.mdi-24px`, `.mdi-36px`, and `.mdi-48px` can be added to easily change the size of the icon to the most optimal sizes.
```html Size Example
<a class="mdi mdi-home mdi-24px" href="/">Home</a> <!-- Sets the home icon to be 24x24px -->
<a class="mdi mdi-home mdi-36px" href="/">Home</a> <!-- Sets the home icon to be 36x36px -->
```
#### Color
Use either `.mdi-light` or `.mdi-dark` to set the color of the icon to the default material values. You can also add `.mdi-inactive` to an element with those classes to use the inactive color variant.
```html Color Example
<a class="mdi mdi-home mdi-light" href="/">Home</a>
<a class="mdi mdi-home mdi-dark" href="/">Home</a>
<a class="mdi mdi-home mdi-light mdi-inactive" href="/">Home</a>
<a class="mdi mdi-home mdi-dark mdi-inactive" href="/">Home</a>
```
#### Flip
Icons can be flipped horizontally and/or vertically using the classes `.mdi-flip-h` and `.mdi-flip-v`.
```html Flip Example
<a class="mdi mdi-home mdi-flip-h" href="/">Home</a>
<a class="mdi mdi-home mdi-flip-v" href="/">Home</a>
```
#### Rotate
Icons can be rotated by 45 degree increments using the syntax `.mdi-rotate-[angle]` where angle is one of the following values: 45, 90, 135, 180, 225, 270, or 315.
```html Rotate Example
<a class="mdi mdi-home mdi-rotate-45" href="/">Home</a>
<a class="mdi mdi-home mdi-rotate-180" href="/">Home</a>
```
#### Iconsets (v1.6.80+)
As of version 1.6.80+, the `mdi` class can no longer be applied once to a parent element so that all child elements inherit the `mdi` styles needed to render icons (set the font to use the mdi iconfont etc). To remedy this, we have added a new class `.mdi-set`. This simply allows you to do something like the following example without specifying the `mdi` class on every icon.
```html Iconset Example
<div class="mdi-set">
<i class="mdi-star"></i>
<i class="mdi-star"></i>
<i class="mdi-star"></i>
<i class="mdi-star"></i>
<i class="mdi-star"></i>
</div>
```
## Inline SVG
The webfont is not the only way to use the icons. They can also be included inline with the `svg` tag. Right click any icon on the site and click the 'View SVG' item in the context menu for example code.
```html SVG Inline Example
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M ... Z" /> <!-- account -->
</svg>
```
SVGs like the webfont can be overlayed and combined.
```html Overlay Example
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M ... Z" /> <!-- account -->
<path fill="#990000" d="M ... Z" /> <!-- block-helper -->
</svg>
```
@previewOverlay()
SVGs can also be styled with CSS similar to HTML elements and assigned classes.
```css Examples
svg.example:hover path {
fill: #900;
fill-opacity: 0.5;
}
```
## SASS
Use the characters in custom SASS use the method below.
```
@function mdi($name) {
@return char(nth($hexes, index($names, $name)));
}
.custom:before {
font: normal normal normal 24px/1 "Material Design Icons";
content: mdi('account');
}
```
## JavaScript / TypeScript
Please use the `@mdi/js` package to include ES6 importing and tree shaking of only the icons you make use of. A simple example with
JS is below.
```js
import { mdiAccount } from '@mdi/js'
function Icon(props) {
return (
<svg viewBox="0 0 24 24"
style={{ width: '24px', height: '24px' }}>
<path d={props.path}/>
</svg>
)
}
function App(props) {
return (
<Icon path={mdiAccount}/>
)
}
```
## ReactJS
For [ReactJS](https://reactjs.org) use the `@mdi/react` library. Learn more: [MaterialDesign-React](https://github.com/Templarian/MaterialDesign-React).
## React with Material-UI
If you use React with the [Material-UI](http://www.material-ui.com/) component library, you can use a [third-party package](https://github.com/TeamWertarbyte/mdi-material-ui) that provides `SvgIcon` wrappers for every icon.
## Android (Vector Drawable)
Android uses the Vector Drawable format that is similar to SVG. Right click any icon to download or view the vector drawable syntax.
## WPF / Windows / Windows Phone
Windows uses the vector XAML format. Right click any icon on the site and click the "View XAML" item in the context menu.
## Angular 2.x/4.x @download(Download for Angular Material 'mdi.svg', /api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)
The `mdi.svg` contains all the icons provided on the site. Use inline with [MatIconRegistry](https://material.angular.io/components/icon/api).
The following assumes that you're using the latest version of `@angular/material` (`2.0.0-beta.12`) and you already have the basic knowledge of Angular Material.
Place the SVG file under your `assets` folder. Please ensure that this file is publicly accessible.
In your app's module file (typically `app.module.ts`), import `MatIconModule` and `MatIconRegistry` from `@angular/material`:
```typescript App module
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MatIconRegistry, MatIconModule } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
/*
From the latest master, HttpClientModule is required instead
import { HttpClientModule } from '@angular/common/http';
*/
...
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpModule,
// From the latest master, HttpClientModule is required instead
// Your other modules
// Take note that you have to import MatIconModule into your app
MatIconModule
]
})
export class AppModule {
constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){
matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')); // Or whatever path you placed mdi.svg at
}
}
```
If you're using Angular CLI, make sure to include `assets` folder under `.angular-cli.json` in `assets` array (Although by default, the angular CLI will autofill it in):
```json Angular CLI file
{
"apps": [
{
"assets": [
"assets"
]
}
]
}
```
Usage:
```html Example Usage
<!-- Icon by itself -->
<mat-icon svgIcon="android"></mat-icon>
<!-- Icon button -->
<button mat-icon-button>
<mat-icon svgIcon="android"></mat-icon>
</button>
<!-- You can also combine an icon and text together -->
<button mat-button>
<mat-icon svgIcon="code-tags"></mat-icon>
View source
</button>
```
Please also add the following class to your styles (`styles.css`) to solve the problem where an icon isn't aligned properly when used in a menu item:
```css styles.css
button.mat-menu-item {
line-height: 24px !important;
}
a.mat-menu-item > mat-icon {
margin-bottom: 14px;
}
.mat-icon svg {
height: 24px;
width: 24px;
}
```
[Demo](https://stackblitz.com/edit/mdi-material-example)
For more information on icons, refer to the [icon docs](https://material.angular.io/components/icon/overview).
## Angular JS @download(Download for AngularJS Material 'mdi.svg', /api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)
The `mdi.svg` contains all the icons provided on the site. Use inline with [$mdIconProvider](https://material.angularjs.org/latest/api/service/$mdIconProvider).
```javascript Configuration
var app = angular.module('myApp', ['ngMaterial']);
app.config(function($mdIconProvider) {
$mdIconProvider
.defaultIconSet('my/app/mdi.svg')
});
```
Usage:
```html Example Usage
<md-icon md-svg-icon="android"></md-icon>
<md-button aria-label="Android" class="md-icon-button">
<md-icon md-svg-icon="android"></md-icon>
</md-button>
```
## Polymer @download(Download for Polymer v0.5 'mdi.html', /api/download/polymer/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B) @download(Download for Polymer v1.0 'mdi.html', /api/download/polymer/v1/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)
The `mdi.html` contains all the icons provided on the site. Use inline with the following code.
```html Polymer Example
<core-icon icon="mdi:account"></core-icon>
```
Learn more about custom icons in the [polymer documentation for v0.5](https://www.polymer-project.org/docs/elements/icons.html#roll-your-own) and for Polymer v1.0 [iron-iconset-svg](https://elements.polymer-project.org/elements/iron-iconset-svg).
## Vue
If you are using [Vue.js](https://vuejs.org/), you can find a collection of the SVG icons as single file components packaged as [vue-material-design-icons](https://www.npmjs.com/package/vue-material-design-icons).
## PHP / Twig
You can use the `mesavolt/mdi-php` composer package to easily use MDI in your native PHP views:
```php
<?php Mdi::withIconsPath(__DIR__.'/../../../node_modules/@mdi/svg/svg/'); ?>
<button>
<?php echo Mdi::mdi('account'); ?>
My account
</button>
```
Twig integration is easy too:
```twig
<button>
{{ mdi('account', 'fill-muted', 42, {'aria-label': 'My account icon'}) }}
My account
</button>
```
Learn more: [MaterialDesignIcons-PHP](https://github.com/chteuchteu/MaterialDesignIcons-PHP)
## Ember
If you use [Ember.js](https://www.emberjs.com/), you can try to install the addon [ember-mdi](https://github.com/kaermorchen/ember-mdi) ([demo](https://kaermorchen.github.io/ember-mdi/)), which have only SVG icons and based on [mdi-svg](https://github.com/Templarian/MaterialDesign-SVG).
## Cordova
Due to a "bug" in Cordova you will need to manually edit the css file to remove the version query string. [Read More](https://github.com/Templarian/MaterialDesign/issues/760).
## Symbols for Adobe Illustrator
[Download Symbols for Adobe Illustrator](https://github.com/danielhickman/MaterialDesign/tree/master/Symbols/Templarian) by Daniel Hickman. This GitHub repo also includes the steps to keep the symbol library updated with the latest.
## Visual Studio
Please use the [Glyphfriend](https://visualstudiogallery.msdn.microsoft.com/5fd24afb-b3b2-4cec-9b03-1cfcec6123aa) extension to quickly autocomplete icons.
## ATOM
The [tool-bar](https://atom.io/packages/tool-bar) package supports this icon set.
## Grunt `grunt-webfont`
Creating subsets of the font can be done with the [grunt-webfont](https://github.com/sapegin/grunt-webfont) package.
... explain step by step here...
## License
These fonts and designs are covered by the [license](https://github.com/Templarian/MaterialDesign/blob/master/LICENSE) located in the root of the git repo on GitHub.
> The docs that were previously here can still be viewed, but were becoming a mess to maintain.