mirror of
https://github.com/Templarian/MaterialDesign.git
synced 2026-03-03 07:04:06 +01:00
75 lines
2.6 KiB
Plaintext
75 lines
2.6 KiB
Plaintext
@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>
|
|
}
|
|
|
|
# @title
|
|
|
|
There are many different ways you can consume the Material Design Icons in your projects or sites. Below are examples for various platforms.
|
|
|
|
## Web Font (coming soon)
|
|
|
|
For those targetting the web your best option is to use the web font. Place all the font files provided in the same directory as the `MaterialDesignIcons.css`.
|
|
|
|
```html Reference the CSS
|
|
<link href="styles/MaterialDesignIcons.css" media="all" rel="stylesheet" type="text/css" />
|
|
```
|
|
|
|
To use the icons inline use the syntax below.
|
|
|
|
```html Web Font Example
|
|
<i class="mdi mdi-bell"></i> <!-- bell -->
|
|
```
|
|
|
|
@previewBell()
|
|
|
|
## Inline SVG
|
|
|
|
The web font 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 Exmaple
|
|
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
|
|
<path fill="#000000" d="M ... Z" /> <!-- account -->
|
|
</svg>
|
|
```
|
|
|
|
SVGs like the web font 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;
|
|
}
|
|
```
|
|
|
|
## 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.
|
|
|
|
## AngularJS
|
|
|
|
Content
|
|
|
|
## Polymer
|
|
|
|
Content
|