ronan / material-design-icons

Authored by Addy Osmani about 10 years ago

Showing 1 changed file with 37 additions and 0 deletions

...	...	@@ -5,6 +5,7 @@
5	5	## What's included?
6	6
7	7	* SVG versions of all icons in both 24px and 48px flavours
	8	+* SVG and CSS sprites of all icons
8	9	* 1x, 2x icons targeted at the Web (PNG)
9	10	* 1x, 2x, 3x icons targeted at iOS (PNG)
10	11	* Hi-dpi versions of all icons (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)
...	...	@@ -33,6 +34,42 @@
33	34	```sh
34	35	$ npm install material-design-icons
35	36	```
	37	+
	38	+## Structure
	39	+
	40	+### Icons
	41	+
	42	+### Spritesheets
	43	+
	44	+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.
	45	+
	46	+#### Using CSS Sprites
	47	+
	48	+To use a CSS spritesheet, reference the stylesheet for the icon category you wish to use, then include the icon definition in your markup.
	49	+
	50	+E.g: to use one of the play icons in `css-sprite-av`, we would do the following:
	51	+
	52	+Reference the stylesheet:
	53	+
	54	+```html
	55	+ <link href="css-sprite/sprite-av-black.css" rel="stylesheet">
	56	+```
	57	+
	58	+Create an element which will use the icon as a background:
	59	+
	60	+```html
	61	+ <div></div>
	62	+```
	63	+
	64	+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.
	65	+
	66	+```html
	67	+ <div class="icon icon-ic_play_circle_outline_black_24dp"></div>
	68	+```
	69	+
	70	+That's it!
	71	+
	72	+Don't forget to publish the corresponding CSS and SVG/PNG files when deploying your project.
36	73
37	74	## Usage
38	75