Google Git
Sign in
fuchsia / third_party / github.com / google / material-design-icons / 08ff5f18d57a89b819b839b865862ccec8635af4 / . / sprites / svg-sprite / svg-sprite-image.html
blob: d6f9df25e49f8509617cd147c9d2de8b530b9f31 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>SVG CSS sprite preview | svg-sprite</title>
<style>@charset "UTF-8";body{padding:0;margin:0;color:#666;background:#fafafa;font-family:Arial,Helvetica,sans-serif;font-size:1em;line-height:1.4}header{display:block;padding:3em 3em 2em 3em;background-color:#fff}header p{margin:2em 0 0 0}section{border-top:1px solid #eee;padding:2em 3em 0 3em}section ul{margin:0;padding:0}section li{display:inline;display:inline-block;background-color:#fff;position:relative;margin:0 2em 2em 0;vertical-align:top;border:1px solid #ccc;padding:1em 1em 3em 1em;cursor:default}.icon-box{margin:0;width:144px;height:144px;position:relative;background:#ccc url(data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=) top left repeat;border:1px solid #ccc;display:table-cell;vertical-align:middle;text-align:center}.icon{display:inline;display:inline-block}h1{margin-top:0}h2{margin:0;padding:0;font-size:1em;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;left:1em;right:1em;bottom:1em}footer{display:block;margin:0;padding:0 3em 3em 3em}footer p{margin:0;font-size:.7em}footer a{color:#0f7595;margin-left:0}</style>
<style>i{text-indent:200%;white-space:nowrap;overflow:hidden;display:inline-block}</style>
<!--
Sprite CSS
====================================================================================================
This is an all-in-one inline version of the CSS necessary to use the SVG sprite.
-->
<style type="text/css">
.svg-ic_add_a_photo_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_add_to_photos_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_adjust_24px {
background: url(svg-sprite-image.svg) 0 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_assistant_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_assistant_photo_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_audiotrack_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_blur_circular_24px {
background: url(svg-sprite-image.svg) 0 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_blur_linear_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_blur_off_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_blur_on_24px {
background: url(svg-sprite-image.svg) 25% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_brightness_1_24px {
background: url(svg-sprite-image.svg) 25% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_brightness_2_24px {
background: url(svg-sprite-image.svg) 25% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_brightness_3_24px {
background: url(svg-sprite-image.svg) 0 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_brightness_4_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_brightness_5_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_brightness_6_24px {
background: url(svg-sprite-image.svg) 25% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_brightness_7_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_broken_image_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_brush_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_burst_mode_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_camera_24px {
background: url(svg-sprite-image.svg) 0 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_camera_alt_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_camera_front_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_camera_rear_24px {
background: url(svg-sprite-image.svg) 25% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_camera_roll_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_center_focus_strong_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_center_focus_weak_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_collections_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_collections_bookmark_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_color_lens_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_colorize_24px {
background: url(svg-sprite-image.svg) 0 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_compare_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_control_point_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_control_point_duplicate_24px {
background: url(svg-sprite-image.svg) 25% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_16_9_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_3_2_24px {
background: url(svg-sprite-image.svg) 50% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_5_4_24px {
background: url(svg-sprite-image.svg) 50% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_7_5_24px {
background: url(svg-sprite-image.svg) 50% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_din_24px {
background: url(svg-sprite-image.svg) 50% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_free_24px {
background: url(svg-sprite-image.svg) 50% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_landscape_24px {
background: url(svg-sprite-image.svg) 50% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_original_24px {
background: url(svg-sprite-image.svg) 0 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_portrait_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_rotate_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_crop_square_24px {
background: url(svg-sprite-image.svg) 25% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_dehaze_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_details_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_edit_24px {
background: url(svg-sprite-image.svg) 50% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_exposure_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_exposure_neg_1_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_exposure_neg_2_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_exposure_plus_1_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_exposure_plus_2_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_exposure_zero_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_1_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_24px {
background: url(svg-sprite-image.svg) 0 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_2_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_3_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_4_24px {
background: url(svg-sprite-image.svg) 25% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_5_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_6_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_7_24px {
background: url(svg-sprite-image.svg) 50% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_8_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_9_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_9_plus_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_b_and_w_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_center_focus_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_drama_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_frames_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_hdr_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_none_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_tilt_shift_24px {
background: url(svg-sprite-image.svg) 0 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_filter_vintage_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_flare_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_flash_auto_24px {
background: url(svg-sprite-image.svg) 25% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_flash_off_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_flash_on_24px {
background: url(svg-sprite-image.svg) 0 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_flip_24px {
background: url(svg-sprite-image.svg) 50% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_gradient_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_grain_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_grid_off_24px {
background: url(svg-sprite-image.svg) 75% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_grid_on_24px {
background: url(svg-sprite-image.svg) 75% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_hdr_off_24px {
background: url(svg-sprite-image.svg) 75% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_hdr_on_24px {
background: url(svg-sprite-image.svg) 75% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_hdr_strong_24px {
background: url(svg-sprite-image.svg) 75% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_hdr_weak_24px {
background: url(svg-sprite-image.svg) 75% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_healing_24px {
background: url(svg-sprite-image.svg) 75% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_image_24px {
background: url(svg-sprite-image.svg) 75% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_image_aspect_ratio_24px {
background: url(svg-sprite-image.svg) 75% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_iso_24px {
background: url(svg-sprite-image.svg) 0 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_landscape_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_leak_add_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_leak_remove_24px {
background: url(svg-sprite-image.svg) 25% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_lens_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_linked_camera_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_looks_24px {
background: url(svg-sprite-image.svg) 50% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_looks_3_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_looks_4_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_looks_5_24px {
background: url(svg-sprite-image.svg) 75% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_looks_6_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_looks_one_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_looks_two_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_loupe_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_monochrome_photos_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_movie_creation_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_movie_filter_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_music_note_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_nature_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_nature_people_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_navigate_before_24px {
background: url(svg-sprite-image.svg) 0 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_navigate_next_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_palette_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_panorama_24px {
background: url(svg-sprite-image.svg) 25% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_panorama_fish_eye_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_panorama_horizontal_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_panorama_vertical_24px {
background: url(svg-sprite-image.svg) 50% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_panorama_wide_angle_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_photo_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_photo_album_24px {
background: url(svg-sprite-image.svg) 75% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_photo_camera_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_photo_filter_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_photo_library_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_photo_size_select_actual_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_photo_size_select_large_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_photo_size_select_small_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_picture_as_pdf_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_portrait_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_remove_red_eye_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_rotate_90_degrees_ccw_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_rotate_left_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_rotate_right_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_slideshow_24px {
background: url(svg-sprite-image.svg) 0 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_straighten_24px {
background: url(svg-sprite-image.svg) 8.333333333333334% 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_style_24px {
background: url(svg-sprite-image.svg) 16.666666666666668% 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_switch_camera_24px {
background: url(svg-sprite-image.svg) 25% 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_switch_video_24px {
background: url(svg-sprite-image.svg) 33.333333333333336% 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_tag_faces_24px {
background: url(svg-sprite-image.svg) 41.666666666666664% 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_texture_24px {
background: url(svg-sprite-image.svg) 50% 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_timelapse_24px {
background: url(svg-sprite-image.svg) 58.333333333333336% 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_timer_10_24px {
background: url(svg-sprite-image.svg) 66.66666666666667% 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_timer_24px {
background: url(svg-sprite-image.svg) 75% 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_timer_3_24px {
background: url(svg-sprite-image.svg) 83.33333333333333% 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_timer_off_24px {
background: url(svg-sprite-image.svg) 91.66666666666667% 100% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_tonality_24px {
background: url(svg-sprite-image.svg) 100% 0 no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_transform_24px {
background: url(svg-sprite-image.svg) 100% 9.090909090909092% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_tune_24px {
background: url(svg-sprite-image.svg) 100% 18.181818181818183% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_view_comfy_24px {
background: url(svg-sprite-image.svg) 100% 27.272727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_view_compact_24px {
background: url(svg-sprite-image.svg) 100% 36.36363636363637% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_vignette_24px {
background: url(svg-sprite-image.svg) 100% 45.45454545454545% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_wb_auto_24px {
background: url(svg-sprite-image.svg) 100% 54.54545454545455% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_wb_cloudy_24px {
background: url(svg-sprite-image.svg) 100% 63.63636363636363% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_wb_incandescent_24px {
background: url(svg-sprite-image.svg) 100% 72.72727272727273% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_wb_iridescent_24px {
background: url(svg-sprite-image.svg) 100% 81.81818181818181% no-repeat;
width: 24px;
height: 24px;
}
.svg-ic_wb_sunny_24px {
background: url(svg-sprite-image.svg) 100% 90.9090909090909% no-repeat;
width: 24px;
height: 24px;
}
</style>
<!--
====================================================================================================
-->
</head>
<body>
<header>
<h1>SVG CSS sprite preview</h1>
<p>This preview features the generated SVG file as a conventional CSS sprite. The shapes are displayed as background images of several <code>&lt;i&gt;</code> elements.</p>
</header>
<section>
<!--
Conventional CSS sprite
====================================================================================================
This technique uses CSS classes to display portions of the sprite as background image of
appropriately sized elements.
-->
<ul>
<li title="ic_add_a_photo_24px">
<div class="icon-box">
<!-- ic_add_a_photo_24px -->
<i class="svg-ic_add_a_photo_24px">ic_add_a_photo_24px</i>
</div>
<h2>ic_add_a_photo_24px</h2>
</li>
<li title="ic_add_to_photos_24px">
<div class="icon-box">
<!-- ic_add_to_photos_24px -->
<i class="svg-ic_add_to_photos_24px">ic_add_to_photos_24px</i>
</div>
<h2>ic_add_to_photos_24px</h2>
</li>
<li title="ic_adjust_24px">
<div class="icon-box">
<!-- ic_adjust_24px -->
<i class="svg-ic_adjust_24px">ic_adjust_24px</i>
</div>
<h2>ic_adjust_24px</h2>
</li>
<li title="ic_assistant_24px">
<div class="icon-box">
<!-- ic_assistant_24px -->
<i class="svg-ic_assistant_24px">ic_assistant_24px</i>
</div>
<h2>ic_assistant_24px</h2>
</li>
<li title="ic_assistant_photo_24px">
<div class="icon-box">
<!-- ic_assistant_photo_24px -->
<i class="svg-ic_assistant_photo_24px">ic_assistant_photo_24px</i>
</div>
<h2>ic_assistant_photo_24px</h2>
</li>
<li title="ic_audiotrack_24px">
<div class="icon-box">
<!-- ic_audiotrack_24px -->
<i class="svg-ic_audiotrack_24px">ic_audiotrack_24px</i>
</div>
<h2>ic_audiotrack_24px</h2>
</li>
<li title="ic_blur_circular_24px">
<div class="icon-box">
<!-- ic_blur_circular_24px -->
<i class="svg-ic_blur_circular_24px">ic_blur_circular_24px</i>
</div>
<h2>ic_blur_circular_24px</h2>
</li>
<li title="ic_blur_linear_24px">
<div class="icon-box">
<!-- ic_blur_linear_24px -->
<i class="svg-ic_blur_linear_24px">ic_blur_linear_24px</i>
</div>
<h2>ic_blur_linear_24px</h2>
</li>
<li title="ic_blur_off_24px">
<div class="icon-box">
<!-- ic_blur_off_24px -->
<i class="svg-ic_blur_off_24px">ic_blur_off_24px</i>
</div>
<h2>ic_blur_off_24px</h2>
</li>
<li title="ic_blur_on_24px">
<div class="icon-box">
<!-- ic_blur_on_24px -->
<i class="svg-ic_blur_on_24px">ic_blur_on_24px</i>
</div>
<h2>ic_blur_on_24px</h2>
</li>
<li title="ic_brightness_1_24px">
<div class="icon-box">
<!-- ic_brightness_1_24px -->
<i class="svg-ic_brightness_1_24px">ic_brightness_1_24px</i>
</div>
<h2>ic_brightness_1_24px</h2>
</li>
<li title="ic_brightness_2_24px">
<div class="icon-box">
<!-- ic_brightness_2_24px -->
<i class="svg-ic_brightness_2_24px">ic_brightness_2_24px</i>
</div>
<h2>ic_brightness_2_24px</h2>
</li>
<li title="ic_brightness_3_24px">
<div class="icon-box">
<!-- ic_brightness_3_24px -->
<i class="svg-ic_brightness_3_24px">ic_brightness_3_24px</i>
</div>
<h2>ic_brightness_3_24px</h2>
</li>
<li title="ic_brightness_4_24px">
<div class="icon-box">
<!-- ic_brightness_4_24px -->
<i class="svg-ic_brightness_4_24px">ic_brightness_4_24px</i>
</div>
<h2>ic_brightness_4_24px</h2>
</li>
<li title="ic_brightness_5_24px">
<div class="icon-box">
<!-- ic_brightness_5_24px -->
<i class="svg-ic_brightness_5_24px">ic_brightness_5_24px</i>
</div>
<h2>ic_brightness_5_24px</h2>
</li>
<li title="ic_brightness_6_24px">
<div class="icon-box">
<!-- ic_brightness_6_24px -->
<i class="svg-ic_brightness_6_24px">ic_brightness_6_24px</i>
</div>
<h2>ic_brightness_6_24px</h2>
</li>
<li title="ic_brightness_7_24px">
<div class="icon-box">
<!-- ic_brightness_7_24px -->
<i class="svg-ic_brightness_7_24px">ic_brightness_7_24px</i>
</div>
<h2>ic_brightness_7_24px</h2>
</li>
<li title="ic_broken_image_24px">
<div class="icon-box">
<!-- ic_broken_image_24px -->
<i class="svg-ic_broken_image_24px">ic_broken_image_24px</i>
</div>
<h2>ic_broken_image_24px</h2>
</li>
<li title="ic_brush_24px">
<div class="icon-box">
<!-- ic_brush_24px -->
<i class="svg-ic_brush_24px">ic_brush_24px</i>
</div>
<h2>ic_brush_24px</h2>
</li>
<li title="ic_burst_mode_24px">
<div class="icon-box">
<!-- ic_burst_mode_24px -->
<i class="svg-ic_burst_mode_24px">ic_burst_mode_24px</i>
</div>
<h2>ic_burst_mode_24px</h2>
</li>
<li title="ic_camera_24px">
<div class="icon-box">
<!-- ic_camera_24px -->
<i class="svg-ic_camera_24px">ic_camera_24px</i>
</div>
<h2>ic_camera_24px</h2>
</li>
<li title="ic_camera_alt_24px">
<div class="icon-box">
<!-- ic_camera_alt_24px -->
<i class="svg-ic_camera_alt_24px">ic_camera_alt_24px</i>
</div>
<h2>ic_camera_alt_24px</h2>
</li>
<li title="ic_camera_front_24px">
<div class="icon-box">
<!-- ic_camera_front_24px -->
<i class="svg-ic_camera_front_24px">ic_camera_front_24px</i>
</div>
<h2>ic_camera_front_24px</h2>
</li>
<li title="ic_camera_rear_24px">
<div class="icon-box">
<!-- ic_camera_rear_24px -->
<i class="svg-ic_camera_rear_24px">ic_camera_rear_24px</i>
</div>
<h2>ic_camera_rear_24px</h2>
</li>
<li title="ic_camera_roll_24px">
<div class="icon-box">
<!-- ic_camera_roll_24px -->
<i class="svg-ic_camera_roll_24px">ic_camera_roll_24px</i>
</div>
<h2>ic_camera_roll_24px</h2>
</li>
<li title="ic_center_focus_strong_24px">
<div class="icon-box">
<!-- ic_center_focus_strong_24px -->
<i class="svg-ic_center_focus_strong_24px">ic_center_focus_strong_24px</i>
</div>
<h2>ic_center_focus_strong_24px</h2>
</li>
<li title="ic_center_focus_weak_24px">
<div class="icon-box">
<!-- ic_center_focus_weak_24px -->
<i class="svg-ic_center_focus_weak_24px">ic_center_focus_weak_24px</i>
</div>
<h2>ic_center_focus_weak_24px</h2>
</li>
<li title="ic_collections_24px">
<div class="icon-box">
<!-- ic_collections_24px -->
<i class="svg-ic_collections_24px">ic_collections_24px</i>
</div>
<h2>ic_collections_24px</h2>
</li>
<li title="ic_collections_bookmark_24px">
<div class="icon-box">
<!-- ic_collections_bookmark_24px -->
<i class="svg-ic_collections_bookmark_24px">ic_collections_bookmark_24px</i>
</div>
<h2>ic_collections_bookmark_24px</h2>
</li>
<li title="ic_color_lens_24px">
<div class="icon-box">
<!-- ic_color_lens_24px -->
<i class="svg-ic_color_lens_24px">ic_color_lens_24px</i>
</div>
<h2>ic_color_lens_24px</h2>
</li>
<li title="ic_colorize_24px">
<div class="icon-box">
<!-- ic_colorize_24px -->
<i class="svg-ic_colorize_24px">ic_colorize_24px</i>
</div>
<h2>ic_colorize_24px</h2>
</li>
<li title="ic_compare_24px">
<div class="icon-box">
<!-- ic_compare_24px -->
<i class="svg-ic_compare_24px">ic_compare_24px</i>
</div>
<h2>ic_compare_24px</h2>
</li>
<li title="ic_control_point_24px">
<div class="icon-box">
<!-- ic_control_point_24px -->
<i class="svg-ic_control_point_24px">ic_control_point_24px</i>
</div>
<h2>ic_control_point_24px</h2>
</li>
<li title="ic_control_point_duplicate_24px">
<div class="icon-box">
<!-- ic_control_point_duplicate_24px -->
<i class="svg-ic_control_point_duplicate_24px">ic_control_point_duplicate_24px</i>
</div>
<h2>ic_control_point_duplicate_24px</h2>
</li>
<li title="ic_crop_16_9_24px">
<div class="icon-box">
<!-- ic_crop_16_9_24px -->
<i class="svg-ic_crop_16_9_24px">ic_crop_16_9_24px</i>
</div>
<h2>ic_crop_16_9_24px</h2>
</li>
<li title="ic_crop_24px">
<div class="icon-box">
<!-- ic_crop_24px -->
<i class="svg-ic_crop_24px">ic_crop_24px</i>
</div>
<h2>ic_crop_24px</h2>
</li>
<li title="ic_crop_3_2_24px">
<div class="icon-box">
<!-- ic_crop_3_2_24px -->
<i class="svg-ic_crop_3_2_24px">ic_crop_3_2_24px</i>
</div>
<h2>ic_crop_3_2_24px</h2>
</li>
<li title="ic_crop_5_4_24px">
<div class="icon-box">
<!-- ic_crop_5_4_24px -->
<i class="svg-ic_crop_5_4_24px">ic_crop_5_4_24px</i>
</div>
<h2>ic_crop_5_4_24px</h2>
</li>
<li title="ic_crop_7_5_24px">
<div class="icon-box">
<!-- ic_crop_7_5_24px -->
<i class="svg-ic_crop_7_5_24px">ic_crop_7_5_24px</i>
</div>
<h2>ic_crop_7_5_24px</h2>
</li>
<li title="ic_crop_din_24px">
<div class="icon-box">
<!-- ic_crop_din_24px -->
<i class="svg-ic_crop_din_24px">ic_crop_din_24px</i>
</div>
<h2>ic_crop_din_24px</h2>
</li>
<li title="ic_crop_free_24px">
<div class="icon-box">
<!-- ic_crop_free_24px -->
<i class="svg-ic_crop_free_24px">ic_crop_free_24px</i>
</div>
<h2>ic_crop_free_24px</h2>
</li>
<li title="ic_crop_landscape_24px">
<div class="icon-box">
<!-- ic_crop_landscape_24px -->
<i class="svg-ic_crop_landscape_24px">ic_crop_landscape_24px</i>
</div>
<h2>ic_crop_landscape_24px</h2>
</li>
<li title="ic_crop_original_24px">
<div class="icon-box">
<!-- ic_crop_original_24px -->
<i class="svg-ic_crop_original_24px">ic_crop_original_24px</i>
</div>
<h2>ic_crop_original_24px</h2>
</li>
<li title="ic_crop_portrait_24px">
<div class="icon-box">
<!-- ic_crop_portrait_24px -->
<i class="svg-ic_crop_portrait_24px">ic_crop_portrait_24px</i>
</div>
<h2>ic_crop_portrait_24px</h2>
</li>
<li title="ic_crop_rotate_24px">
<div class="icon-box">
<!-- ic_crop_rotate_24px -->
<i class="svg-ic_crop_rotate_24px">ic_crop_rotate_24px</i>
</div>
<h2>ic_crop_rotate_24px</h2>
</li>
<li title="ic_crop_square_24px">
<div class="icon-box">
<!-- ic_crop_square_24px -->
<i class="svg-ic_crop_square_24px">ic_crop_square_24px</i>
</div>
<h2>ic_crop_square_24px</h2>
</li>
<li title="ic_dehaze_24px">
<div class="icon-box">
<!-- ic_dehaze_24px -->
<i class="svg-ic_dehaze_24px">ic_dehaze_24px</i>
</div>
<h2>ic_dehaze_24px</h2>
</li>
<li title="ic_details_24px">
<div class="icon-box">
<!-- ic_details_24px -->
<i class="svg-ic_details_24px">ic_details_24px</i>
</div>
<h2>ic_details_24px</h2>
</li>
<li title="ic_edit_24px">
<div class="icon-box">
<!-- ic_edit_24px -->
<i class="svg-ic_edit_24px">ic_edit_24px</i>
</div>
<h2>ic_edit_24px</h2>
</li>
<li title="ic_exposure_24px">
<div class="icon-box">
<!-- ic_exposure_24px -->
<i class="svg-ic_exposure_24px">ic_exposure_24px</i>
</div>
<h2>ic_exposure_24px</h2>
</li>
<li title="ic_exposure_neg_1_24px">
<div class="icon-box">
<!-- ic_exposure_neg_1_24px -->
<i class="svg-ic_exposure_neg_1_24px">ic_exposure_neg_1_24px</i>
</div>
<h2>ic_exposure_neg_1_24px</h2>
</li>
<li title="ic_exposure_neg_2_24px">
<div class="icon-box">
<!-- ic_exposure_neg_2_24px -->
<i class="svg-ic_exposure_neg_2_24px">ic_exposure_neg_2_24px</i>
</div>
<h2>ic_exposure_neg_2_24px</h2>
</li>
<li title="ic_exposure_plus_1_24px">
<div class="icon-box">
<!-- ic_exposure_plus_1_24px -->
<i class="svg-ic_exposure_plus_1_24px">ic_exposure_plus_1_24px</i>
</div>
<h2>ic_exposure_plus_1_24px</h2>
</li>
<li title="ic_exposure_plus_2_24px">
<div class="icon-box">
<!-- ic_exposure_plus_2_24px -->
<i class="svg-ic_exposure_plus_2_24px">ic_exposure_plus_2_24px</i>
</div>
<h2>ic_exposure_plus_2_24px</h2>
</li>
<li title="ic_exposure_zero_24px">
<div class="icon-box">
<!-- ic_exposure_zero_24px -->
<i class="svg-ic_exposure_zero_24px">ic_exposure_zero_24px</i>
</div>
<h2>ic_exposure_zero_24px</h2>
</li>
<li title="ic_filter_1_24px">
<div class="icon-box">
<!-- ic_filter_1_24px -->
<i class="svg-ic_filter_1_24px">ic_filter_1_24px</i>
</div>
<h2>ic_filter_1_24px</h2>
</li>
<li title="ic_filter_24px">
<div class="icon-box">
<!-- ic_filter_24px -->
<i class="svg-ic_filter_24px">ic_filter_24px</i>
</div>
<h2>ic_filter_24px</h2>
</li>
<li title="ic_filter_2_24px">
<div class="icon-box">
<!-- ic_filter_2_24px -->
<i class="svg-ic_filter_2_24px">ic_filter_2_24px</i>
</div>
<h2>ic_filter_2_24px</h2>
</li>
<li title="ic_filter_3_24px">
<div class="icon-box">
<!-- ic_filter_3_24px -->
<i class="svg-ic_filter_3_24px">ic_filter_3_24px</i>
</div>
<h2>ic_filter_3_24px</h2>
</li>
<li title="ic_filter_4_24px">
<div class="icon-box">
<!-- ic_filter_4_24px -->
<i class="svg-ic_filter_4_24px">ic_filter_4_24px</i>
</div>
<h2>ic_filter_4_24px</h2>
</li>
<li title="ic_filter_5_24px">
<div class="icon-box">
<!-- ic_filter_5_24px -->
<i class="svg-ic_filter_5_24px">ic_filter_5_24px</i>
</div>
<h2>ic_filter_5_24px</h2>
</li>
<li title="ic_filter_6_24px">
<div class="icon-box">
<!-- ic_filter_6_24px -->
<i class="svg-ic_filter_6_24px">ic_filter_6_24px</i>
</div>
<h2>ic_filter_6_24px</h2>
</li>
<li title="ic_filter_7_24px">
<div class="icon-box">
<!-- ic_filter_7_24px -->
<i class="svg-ic_filter_7_24px">ic_filter_7_24px</i>
</div>
<h2>ic_filter_7_24px</h2>
</li>
<li title="ic_filter_8_24px">
<div class="icon-box">
<!-- ic_filter_8_24px -->
<i class="svg-ic_filter_8_24px">ic_filter_8_24px</i>
</div>
<h2>ic_filter_8_24px</h2>
</li>
<li title="ic_filter_9_24px">
<div class="icon-box">
<!-- ic_filter_9_24px -->
<i class="svg-ic_filter_9_24px">ic_filter_9_24px</i>
</div>
<h2>ic_filter_9_24px</h2>
</li>
<li title="ic_filter_9_plus_24px">
<div class="icon-box">
<!-- ic_filter_9_plus_24px -->
<i class="svg-ic_filter_9_plus_24px">ic_filter_9_plus_24px</i>
</div>
<h2>ic_filter_9_plus_24px</h2>
</li>
<li title="ic_filter_b_and_w_24px">
<div class="icon-box">
<!-- ic_filter_b_and_w_24px -->
<i class="svg-ic_filter_b_and_w_24px">ic_filter_b_and_w_24px</i>
</div>
<h2>ic_filter_b_and_w_24px</h2>
</li>
<li title="ic_filter_center_focus_24px">
<div class="icon-box">
<!-- ic_filter_center_focus_24px -->
<i class="svg-ic_filter_center_focus_24px">ic_filter_center_focus_24px</i>
</div>
<h2>ic_filter_center_focus_24px</h2>
</li>
<li title="ic_filter_drama_24px">
<div class="icon-box">
<!-- ic_filter_drama_24px -->
<i class="svg-ic_filter_drama_24px">ic_filter_drama_24px</i>
</div>
<h2>ic_filter_drama_24px</h2>
</li>
<li title="ic_filter_frames_24px">
<div class="icon-box">
<!-- ic_filter_frames_24px -->
<i class="svg-ic_filter_frames_24px">ic_filter_frames_24px</i>
</div>
<h2>ic_filter_frames_24px</h2>
</li>
<li title="ic_filter_hdr_24px">
<div class="icon-box">
<!-- ic_filter_hdr_24px -->
<i class="svg-ic_filter_hdr_24px">ic_filter_hdr_24px</i>
</div>
<h2>ic_filter_hdr_24px</h2>
</li>
<li title="ic_filter_none_24px">
<div class="icon-box">
<!-- ic_filter_none_24px -->
<i class="svg-ic_filter_none_24px">ic_filter_none_24px</i>
</div>
<h2>ic_filter_none_24px</h2>
</li>
<li title="ic_filter_tilt_shift_24px">
<div class="icon-box">
<!-- ic_filter_tilt_shift_24px -->
<i class="svg-ic_filter_tilt_shift_24px">ic_filter_tilt_shift_24px</i>
</div>
<h2>ic_filter_tilt_shift_24px</h2>
</li>
<li title="ic_filter_vintage_24px">
<div class="icon-box">
<!-- ic_filter_vintage_24px -->
<i class="svg-ic_filter_vintage_24px">ic_filter_vintage_24px</i>
</div>
<h2>ic_filter_vintage_24px</h2>
</li>
<li title="ic_flare_24px">
<div class="icon-box">
<!-- ic_flare_24px -->
<i class="svg-ic_flare_24px">ic_flare_24px</i>
</div>
<h2>ic_flare_24px</h2>
</li>
<li title="ic_flash_auto_24px">
<div class="icon-box">
<!-- ic_flash_auto_24px -->
<i class="svg-ic_flash_auto_24px">ic_flash_auto_24px</i>
</div>
<h2>ic_flash_auto_24px</h2>
</li>
<li title="ic_flash_off_24px">
<div class="icon-box">
<!-- ic_flash_off_24px -->
<i class="svg-ic_flash_off_24px">ic_flash_off_24px</i>
</div>
<h2>ic_flash_off_24px</h2>
</li>
<li title="ic_flash_on_24px">
<div class="icon-box">
<!-- ic_flash_on_24px -->
<i class="svg-ic_flash_on_24px">ic_flash_on_24px</i>
</div>
<h2>ic_flash_on_24px</h2>
</li>
<li title="ic_flip_24px">
<div class="icon-box">
<!-- ic_flip_24px -->
<i class="svg-ic_flip_24px">ic_flip_24px</i>
</div>
<h2>ic_flip_24px</h2>
</li>
<li title="ic_gradient_24px">
<div class="icon-box">
<!-- ic_gradient_24px -->
<i class="svg-ic_gradient_24px">ic_gradient_24px</i>
</div>
<h2>ic_gradient_24px</h2>
</li>
<li title="ic_grain_24px">
<div class="icon-box">
<!-- ic_grain_24px -->
<i class="svg-ic_grain_24px">ic_grain_24px</i>
</div>
<h2>ic_grain_24px</h2>
</li>
<li title="ic_grid_off_24px">
<div class="icon-box">
<!-- ic_grid_off_24px -->
<i class="svg-ic_grid_off_24px">ic_grid_off_24px</i>
</div>
<h2>ic_grid_off_24px</h2>
</li>
<li title="ic_grid_on_24px">
<div class="icon-box">
<!-- ic_grid_on_24px -->
<i class="svg-ic_grid_on_24px">ic_grid_on_24px</i>
</div>
<h2>ic_grid_on_24px</h2>
</li>
<li title="ic_hdr_off_24px">
<div class="icon-box">
<!-- ic_hdr_off_24px -->
<i class="svg-ic_hdr_off_24px">ic_hdr_off_24px</i>
</div>
<h2>ic_hdr_off_24px</h2>
</li>
<li title="ic_hdr_on_24px">
<div class="icon-box">
<!-- ic_hdr_on_24px -->
<i class="svg-ic_hdr_on_24px">ic_hdr_on_24px</i>
</div>
<h2>ic_hdr_on_24px</h2>
</li>
<li title="ic_hdr_strong_24px">
<div class="icon-box">
<!-- ic_hdr_strong_24px -->
<i class="svg-ic_hdr_strong_24px">ic_hdr_strong_24px</i>
</div>
<h2>ic_hdr_strong_24px</h2>
</li>
<li title="ic_hdr_weak_24px">
<div class="icon-box">
<!-- ic_hdr_weak_24px -->
<i class="svg-ic_hdr_weak_24px">ic_hdr_weak_24px</i>
</div>
<h2>ic_hdr_weak_24px</h2>
</li>
<li title="ic_healing_24px">
<div class="icon-box">
<!-- ic_healing_24px -->
<i class="svg-ic_healing_24px">ic_healing_24px</i>
</div>
<h2>ic_healing_24px</h2>
</li>
<li title="ic_image_24px">
<div class="icon-box">
<!-- ic_image_24px -->
<i class="svg-ic_image_24px">ic_image_24px</i>
</div>
<h2>ic_image_24px</h2>
</li>
<li title="ic_image_aspect_ratio_24px">
<div class="icon-box">
<!-- ic_image_aspect_ratio_24px -->
<i class="svg-ic_image_aspect_ratio_24px">ic_image_aspect_ratio_24px</i>
</div>
<h2>ic_image_aspect_ratio_24px</h2>
</li>
<li title="ic_iso_24px">
<div class="icon-box">
<!-- ic_iso_24px -->
<i class="svg-ic_iso_24px">ic_iso_24px</i>
</div>
<h2>ic_iso_24px</h2>
</li>
<li title="ic_landscape_24px">
<div class="icon-box">
<!-- ic_landscape_24px -->
<i class="svg-ic_landscape_24px">ic_landscape_24px</i>
</div>
<h2>ic_landscape_24px</h2>
</li>
<li title="ic_leak_add_24px">
<div class="icon-box">
<!-- ic_leak_add_24px -->
<i class="svg-ic_leak_add_24px">ic_leak_add_24px</i>
</div>
<h2>ic_leak_add_24px</h2>
</li>
<li title="ic_leak_remove_24px">
<div class="icon-box">
<!-- ic_leak_remove_24px -->
<i class="svg-ic_leak_remove_24px">ic_leak_remove_24px</i>
</div>
<h2>ic_leak_remove_24px</h2>
</li>
<li title="ic_lens_24px">
<div class="icon-box">
<!-- ic_lens_24px -->
<i class="svg-ic_lens_24px">ic_lens_24px</i>
</div>
<h2>ic_lens_24px</h2>
</li>
<li title="ic_linked_camera_24px">
<div class="icon-box">
<!-- ic_linked_camera_24px -->
<i class="svg-ic_linked_camera_24px">ic_linked_camera_24px</i>
</div>
<h2>ic_linked_camera_24px</h2>
</li>
<li title="ic_looks_24px">
<div class="icon-box">
<!-- ic_looks_24px -->
<i class="svg-ic_looks_24px">ic_looks_24px</i>
</div>
<h2>ic_looks_24px</h2>
</li>
<li title="ic_looks_3_24px">
<div class="icon-box">
<!-- ic_looks_3_24px -->
<i class="svg-ic_looks_3_24px">ic_looks_3_24px</i>
</div>
<h2>ic_looks_3_24px</h2>
</li>
<li title="ic_looks_4_24px">
<div class="icon-box">
<!-- ic_looks_4_24px -->
<i class="svg-ic_looks_4_24px">ic_looks_4_24px</i>
</div>
<h2>ic_looks_4_24px</h2>
</li>
<li title="ic_looks_5_24px">
<div class="icon-box">
<!-- ic_looks_5_24px -->
<i class="svg-ic_looks_5_24px">ic_looks_5_24px</i>
</div>
<h2>ic_looks_5_24px</h2>
</li>
<li title="ic_looks_6_24px">
<div class="icon-box">
<!-- ic_looks_6_24px -->
<i class="svg-ic_looks_6_24px">ic_looks_6_24px</i>
</div>
<h2>ic_looks_6_24px</h2>
</li>
<li title="ic_looks_one_24px">
<div class="icon-box">
<!-- ic_looks_one_24px -->
<i class="svg-ic_looks_one_24px">ic_looks_one_24px</i>
</div>
<h2>ic_looks_one_24px</h2>
</li>
<li title="ic_looks_two_24px">
<div class="icon-box">
<!-- ic_looks_two_24px -->
<i class="svg-ic_looks_two_24px">ic_looks_two_24px</i>
</div>
<h2>ic_looks_two_24px</h2>
</li>
<li title="ic_loupe_24px">
<div class="icon-box">
<!-- ic_loupe_24px -->
<i class="svg-ic_loupe_24px">ic_loupe_24px</i>
</div>
<h2>ic_loupe_24px</h2>
</li>
<li title="ic_monochrome_photos_24px">
<div class="icon-box">
<!-- ic_monochrome_photos_24px -->
<i class="svg-ic_monochrome_photos_24px">ic_monochrome_photos_24px</i>
</div>
<h2>ic_monochrome_photos_24px</h2>
</li>
<li title="ic_movie_creation_24px">
<div class="icon-box">
<!-- ic_movie_creation_24px -->
<i class="svg-ic_movie_creation_24px">ic_movie_creation_24px</i>
</div>
<h2>ic_movie_creation_24px</h2>
</li>
<li title="ic_movie_filter_24px">
<div class="icon-box">
<!-- ic_movie_filter_24px -->
<i class="svg-ic_movie_filter_24px">ic_movie_filter_24px</i>
</div>
<h2>ic_movie_filter_24px</h2>
</li>
<li title="ic_music_note_24px">
<div class="icon-box">
<!-- ic_music_note_24px -->
<i class="svg-ic_music_note_24px">ic_music_note_24px</i>
</div>
<h2>ic_music_note_24px</h2>
</li>
<li title="ic_nature_24px">
<div class="icon-box">
<!-- ic_nature_24px -->
<i class="svg-ic_nature_24px">ic_nature_24px</i>
</div>
<h2>ic_nature_24px</h2>
</li>
<li title="ic_nature_people_24px">
<div class="icon-box">
<!-- ic_nature_people_24px -->
<i class="svg-ic_nature_people_24px">ic_nature_people_24px</i>
</div>
<h2>ic_nature_people_24px</h2>
</li>
<li title="ic_navigate_before_24px">
<div class="icon-box">
<!-- ic_navigate_before_24px -->
<i class="svg-ic_navigate_before_24px">ic_navigate_before_24px</i>
</div>
<h2>ic_navigate_before_24px</h2>
</li>
<li title="ic_navigate_next_24px">
<div class="icon-box">
<!-- ic_navigate_next_24px -->
<i class="svg-ic_navigate_next_24px">ic_navigate_next_24px</i>
</div>
<h2>ic_navigate_next_24px</h2>
</li>
<li title="ic_palette_24px">
<div class="icon-box">
<!-- ic_palette_24px -->
<i class="svg-ic_palette_24px">ic_palette_24px</i>
</div>
<h2>ic_palette_24px</h2>
</li>
<li title="ic_panorama_24px">
<div class="icon-box">
<!-- ic_panorama_24px -->
<i class="svg-ic_panorama_24px">ic_panorama_24px</i>
</div>
<h2>ic_panorama_24px</h2>
</li>
<li title="ic_panorama_fish_eye_24px">
<div class="icon-box">
<!-- ic_panorama_fish_eye_24px -->
<i class="svg-ic_panorama_fish_eye_24px">ic_panorama_fish_eye_24px</i>
</div>
<h2>ic_panorama_fish_eye_24px</h2>
</li>
<li title="ic_panorama_horizontal_24px">
<div class="icon-box">
<!-- ic_panorama_horizontal_24px -->
<i class="svg-ic_panorama_horizontal_24px">ic_panorama_horizontal_24px</i>
</div>
<h2>ic_panorama_horizontal_24px</h2>
</li>
<li title="ic_panorama_vertical_24px">
<div class="icon-box">
<!-- ic_panorama_vertical_24px -->
<i class="svg-ic_panorama_vertical_24px">ic_panorama_vertical_24px</i>
</div>
<h2>ic_panorama_vertical_24px</h2>
</li>
<li title="ic_panorama_wide_angle_24px">
<div class="icon-box">
<!-- ic_panorama_wide_angle_24px -->
<i class="svg-ic_panorama_wide_angle_24px">ic_panorama_wide_angle_24px</i>
</div>
<h2>ic_panorama_wide_angle_24px</h2>
</li>
<li title="ic_photo_24px">
<div class="icon-box">
<!-- ic_photo_24px -->
<i class="svg-ic_photo_24px">ic_photo_24px</i>
</div>
<h2>ic_photo_24px</h2>
</li>
<li title="ic_photo_album_24px">
<div class="icon-box">
<!-- ic_photo_album_24px -->
<i class="svg-ic_photo_album_24px">ic_photo_album_24px</i>
</div>
<h2>ic_photo_album_24px</h2>
</li>
<li title="ic_photo_camera_24px">
<div class="icon-box">
<!-- ic_photo_camera_24px -->
<i class="svg-ic_photo_camera_24px">ic_photo_camera_24px</i>
</div>
<h2>ic_photo_camera_24px</h2>
</li>
<li title="ic_photo_filter_24px">
<div class="icon-box">
<!-- ic_photo_filter_24px -->
<i class="svg-ic_photo_filter_24px">ic_photo_filter_24px</i>
</div>
<h2>ic_photo_filter_24px</h2>
</li>
<li title="ic_photo_library_24px">
<div class="icon-box">
<!-- ic_photo_library_24px -->
<i class="svg-ic_photo_library_24px">ic_photo_library_24px</i>
</div>
<h2>ic_photo_library_24px</h2>
</li>
<li title="ic_photo_size_select_actual_24px">
<div class="icon-box">
<!-- ic_photo_size_select_actual_24px -->
<i class="svg-ic_photo_size_select_actual_24px">ic_photo_size_select_actual_24px</i>
</div>
<h2>ic_photo_size_select_actual_24px</h2>
</li>
<li title="ic_photo_size_select_large_24px">
<div class="icon-box">
<!-- ic_photo_size_select_large_24px -->
<i class="svg-ic_photo_size_select_large_24px">ic_photo_size_select_large_24px</i>
</div>
<h2>ic_photo_size_select_large_24px</h2>
</li>
<li title="ic_photo_size_select_small_24px">
<div class="icon-box">
<!-- ic_photo_size_select_small_24px -->
<i class="svg-ic_photo_size_select_small_24px">ic_photo_size_select_small_24px</i>
</div>
<h2>ic_photo_size_select_small_24px</h2>
</li>
<li title="ic_picture_as_pdf_24px">
<div class="icon-box">
<!-- ic_picture_as_pdf_24px -->
<i class="svg-ic_picture_as_pdf_24px">ic_picture_as_pdf_24px</i>
</div>
<h2>ic_picture_as_pdf_24px</h2>
</li>
<li title="ic_portrait_24px">
<div class="icon-box">
<!-- ic_portrait_24px -->
<i class="svg-ic_portrait_24px">ic_portrait_24px</i>
</div>
<h2>ic_portrait_24px</h2>
</li>
<li title="ic_remove_red_eye_24px">
<div class="icon-box">
<!-- ic_remove_red_eye_24px -->
<i class="svg-ic_remove_red_eye_24px">ic_remove_red_eye_24px</i>
</div>
<h2>ic_remove_red_eye_24px</h2>
</li>
<li title="ic_rotate_90_degrees_ccw_24px">
<div class="icon-box">
<!-- ic_rotate_90_degrees_ccw_24px -->
<i class="svg-ic_rotate_90_degrees_ccw_24px">ic_rotate_90_degrees_ccw_24px</i>
</div>
<h2>ic_rotate_90_degrees_ccw_24px</h2>
</li>
<li title="ic_rotate_left_24px">
<div class="icon-box">
<!-- ic_rotate_left_24px -->
<i class="svg-ic_rotate_left_24px">ic_rotate_left_24px</i>
</div>
<h2>ic_rotate_left_24px</h2>
</li>
<li title="ic_rotate_right_24px">
<div class="icon-box">
<!-- ic_rotate_right_24px -->
<i class="svg-ic_rotate_right_24px">ic_rotate_right_24px</i>
</div>
<h2>ic_rotate_right_24px</h2>
</li>
<li title="ic_slideshow_24px">
<div class="icon-box">
<!-- ic_slideshow_24px -->
<i class="svg-ic_slideshow_24px">ic_slideshow_24px</i>
</div>
<h2>ic_slideshow_24px</h2>
</li>
<li title="ic_straighten_24px">
<div class="icon-box">
<!-- ic_straighten_24px -->
<i class="svg-ic_straighten_24px">ic_straighten_24px</i>
</div>
<h2>ic_straighten_24px</h2>
</li>
<li title="ic_style_24px">
<div class="icon-box">
<!-- ic_style_24px -->
<i class="svg-ic_style_24px">ic_style_24px</i>
</div>
<h2>ic_style_24px</h2>
</li>
<li title="ic_switch_camera_24px">
<div class="icon-box">
<!-- ic_switch_camera_24px -->
<i class="svg-ic_switch_camera_24px">ic_switch_camera_24px</i>
</div>
<h2>ic_switch_camera_24px</h2>
</li>
<li title="ic_switch_video_24px">
<div class="icon-box">
<!-- ic_switch_video_24px -->
<i class="svg-ic_switch_video_24px">ic_switch_video_24px</i>
</div>
<h2>ic_switch_video_24px</h2>
</li>
<li title="ic_tag_faces_24px">
<div class="icon-box">
<!-- ic_tag_faces_24px -->
<i class="svg-ic_tag_faces_24px">ic_tag_faces_24px</i>
</div>
<h2>ic_tag_faces_24px</h2>
</li>
<li title="ic_texture_24px">
<div class="icon-box">
<!-- ic_texture_24px -->
<i class="svg-ic_texture_24px">ic_texture_24px</i>
</div>
<h2>ic_texture_24px</h2>
</li>
<li title="ic_timelapse_24px">
<div class="icon-box">
<!-- ic_timelapse_24px -->
<i class="svg-ic_timelapse_24px">ic_timelapse_24px</i>
</div>
<h2>ic_timelapse_24px</h2>
</li>
<li title="ic_timer_10_24px">
<div class="icon-box">
<!-- ic_timer_10_24px -->
<i class="svg-ic_timer_10_24px">ic_timer_10_24px</i>
</div>
<h2>ic_timer_10_24px</h2>
</li>
<li title="ic_timer_24px">
<div class="icon-box">
<!-- ic_timer_24px -->
<i class="svg-ic_timer_24px">ic_timer_24px</i>
</div>
<h2>ic_timer_24px</h2>
</li>
<li title="ic_timer_3_24px">
<div class="icon-box">
<!-- ic_timer_3_24px -->
<i class="svg-ic_timer_3_24px">ic_timer_3_24px</i>
</div>
<h2>ic_timer_3_24px</h2>
</li>
<li title="ic_timer_off_24px">
<div class="icon-box">
<!-- ic_timer_off_24px -->
<i class="svg-ic_timer_off_24px">ic_timer_off_24px</i>
</div>
<h2>ic_timer_off_24px</h2>
</li>
<li title="ic_tonality_24px">
<div class="icon-box">
<!-- ic_tonality_24px -->
<i class="svg-ic_tonality_24px">ic_tonality_24px</i>
</div>
<h2>ic_tonality_24px</h2>
</li>
<li title="ic_transform_24px">
<div class="icon-box">
<!-- ic_transform_24px -->
<i class="svg-ic_transform_24px">ic_transform_24px</i>
</div>
<h2>ic_transform_24px</h2>
</li>
<li title="ic_tune_24px">
<div class="icon-box">
<!-- ic_tune_24px -->
<i class="svg-ic_tune_24px">ic_tune_24px</i>
</div>
<h2>ic_tune_24px</h2>
</li>
<li title="ic_view_comfy_24px">
<div class="icon-box">
<!-- ic_view_comfy_24px -->
<i class="svg-ic_view_comfy_24px">ic_view_comfy_24px</i>
</div>
<h2>ic_view_comfy_24px</h2>
</li>
<li title="ic_view_compact_24px">
<div class="icon-box">
<!-- ic_view_compact_24px -->
<i class="svg-ic_view_compact_24px">ic_view_compact_24px</i>
</div>
<h2>ic_view_compact_24px</h2>
</li>
<li title="ic_vignette_24px">
<div class="icon-box">
<!-- ic_vignette_24px -->
<i class="svg-ic_vignette_24px">ic_vignette_24px</i>
</div>
<h2>ic_vignette_24px</h2>
</li>
<li title="ic_wb_auto_24px">
<div class="icon-box">
<!-- ic_wb_auto_24px -->
<i class="svg-ic_wb_auto_24px">ic_wb_auto_24px</i>
</div>
<h2>ic_wb_auto_24px</h2>
</li>
<li title="ic_wb_cloudy_24px">
<div class="icon-box">
<!-- ic_wb_cloudy_24px -->
<i class="svg-ic_wb_cloudy_24px">ic_wb_cloudy_24px</i>
</div>
<h2>ic_wb_cloudy_24px</h2>
</li>
<li title="ic_wb_incandescent_24px">
<div class="icon-box">
<!-- ic_wb_incandescent_24px -->
<i class="svg-ic_wb_incandescent_24px">ic_wb_incandescent_24px</i>
</div>
<h2>ic_wb_incandescent_24px</h2>
</li>
<li title="ic_wb_iridescent_24px">
<div class="icon-box">
<!-- ic_wb_iridescent_24px -->
<i class="svg-ic_wb_iridescent_24px">ic_wb_iridescent_24px</i>
</div>
<h2>ic_wb_iridescent_24px</h2>
</li>
<li title="ic_wb_sunny_24px">
<div class="icon-box">
<!-- ic_wb_sunny_24px -->
<i class="svg-ic_wb_sunny_24px">ic_wb_sunny_24px</i>
</div>
<h2>ic_wb_sunny_24px</h2>
</li>
</ul>
<!--
====================================================================================================
-->
</section>
<footer>
<p>Generated at Mon, 08 Feb 2016 20:28:16 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p>
</footer>
</body>
</html>