From ad8543d2ec0409d6b65cfb87305ec8e2959de012 Mon Sep 17 00:00:00 2001 From: Addy Osmani Date: Thu, 16 Oct 2014 16:53:47 +0100 Subject: [PATCH] Add section on CSS Sprites --- README.md | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/README.md b/README.md index a8f29dd..dc1ba1e 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ Material Design Icons are the official open-source icons featured in the Google ## What's included? * SVG versions of all icons in both 24px and 48px flavours +* SVG and CSS sprites of all icons * 1x, 2x icons targeted at the Web (PNG) * 1x, 2x, 3x icons targeted at iOS (PNG) * Hi-dpi versions of all icons (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG) @@ -34,6 +35,42 @@ You can also find all the icons on [npm](http://npmjs.org). $ npm install material-design-icons ``` +## Structure + +### Icons + +### Spritesheets + +Material Design icons come with SVG and CSS sprites for each category of icon we include. These can be found in the `sprites` directory, under the `svg-sprite` and `css-sprite` sub-directories. + +#### Using CSS Sprites + +To use a CSS spritesheet, reference the stylesheet for the icon category you wish to use, then include the icon definition in your markup. + +E.g: to use one of the play icons in `css-sprite-av`, we would do the following: + +Reference the stylesheet: + +```html + +``` + +Create an element which will use the icon as a background: + +```html +
+``` + +Add a class referencing the `icon` spritesheet and specific icon `icon-ic_play_circle_outline_black_24dp`, which you can get from the above stylesheet. + +```html +
+``` + +That's it! + +Don't forget to publish the corresponding CSS and SVG/PNG files when deploying your project. + ## Usage Take a look at the included `index.html` file for a preview of all icons included in the set. You are free to use the icons in the way that makes most sense to your project. -- 1.7.9.5