Skip to content

Commit

Permalink
Cleaned up documentation with symbol usage
Browse files Browse the repository at this point in the history
Full documentation added in both the usage guide and the sprite README
for SVG symbol sprites. Existing documentation and file formatting
cleaned up somewhat.
  • Loading branch information
jpc-ae committed Nov 19, 2015
1 parent 4e9be0c commit fe79327
Show file tree
Hide file tree
Showing 5 changed files with 462 additions and 339 deletions.
23 changes: 17 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Material design icons are the official [icon set](http://www.google.com/design/spec/style/icons.html#icons-system-icons) from Google that are designed under the [material design guidelines](http://www.google.com/design/spec).

## 2.1 Update
### 2.1 Update

The 2.1 update adds 96 new icons!

Expand All @@ -12,16 +12,27 @@ Check out what's new in the [material icons library](https://www.google.com/desi

Read the [developer guide](http://google.github.io/material-design-icons/) on how to use the material design icons in your project.

## Using sprite sheets
### Using a font collection

In `css-sprite` and `svg-sprite` are pre-generated sprite sheets. Instructions for using them are in the [sprites documentation](https://github.com/google/material-design-icons/tree/master/sprites).
The `iconfont` folder contains pre-generated font files that can be included in a project. This is especially convenient for the web; however, it is generally better to link to the web font hosted on Google Fonts:

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

Read more in the [font portion](http://google.github.io/material-design-icons/#icon-font-for-the-web) of our full developer guide.

### Using symbols and sprites

The `css-sprite` and `svg-sprite` folders contain pre-generated sprite sheets, as well as svg symbols that can be `<use>`d more directly and with fewer constraints. Instructions for using them are in the [sprites documentation](https://github.com/google/material-design-icons/tree/master/sprites).

## Polymer icons

If you wish to use the icon set with Polymer, we recommend consuming them via the [`<iron-icons>`](https://github.com/polymerelements/iron-icons) element ([`<core-icons>`](https://github.com/Polymer/core-icons) in v0.5).

## License

We have made these icons available for you to incorporate them into your products under the [Creative Common Attribution 4.0 International License (CC-BY 4.0)](http://creativecommons.org/licenses/by/4.0/). Feel free to remix and re-share these icons and documentation in your
products. We'd love attribution in your app's *about* screen, but it's not required. The only thing we ask is that you not re-sell
the icons themselves.
We have made these icons available for you to incorporate them into your products under the [Creative Common Attribution 4.0 International License (CC-BY 4.0)](http://creativecommons.org/licenses/by/4.0/). Feel free to remix and re-share these icons and documentation in your products.
We'd love attribution in your app's *about* screen, but it's not required.
The only thing we ask is that you not re-sell the icons themselves.
6 changes: 2 additions & 4 deletions iconfont/README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
The recommended way to use the Material Icons font is hosted by Google Fonts,
available here:
The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:

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

Read more in our full usage guide:
http://google.github.io/material-design-icons/#icon-font-for-the-web

Loading

0 comments on commit fe79327

Please sign in to comment.