svg-sprite-av.html 63 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  6. <script src="https://rawgit.com/jonathantneal/svg4everybody/master/svg4everybody.js"></script>
  7. <title>SVG sprite preview | svg-sprite</title>
  8. <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>
  9. <!--
  10. Sprite image dimensions
  11. ====================================================================================================
  12. You will need to set the sprite image dimensions via CSS when you use them as inline SVG, otherwise
  13. they would become a huge 100% in size. You may use the following dimension classes for doing so.
  14. They might well be outsourced to an external stylesheet of course.
  15. -->
  16. <style type="text/css">
  17. .svg-ic_album_24px-dims { width: 24px; height: 24px; }
  18. .svg-ic_av_timer_24px-dims { width: 24px; height: 24px; }
  19. .svg-ic_closed_caption_24px-dims { width: 24px; height: 24px; }
  20. .svg-ic_equalizer_24px-dims { width: 24px; height: 24px; }
  21. .svg-ic_explicit_24px-dims { width: 24px; height: 24px; }
  22. .svg-ic_fast_forward_24px-dims { width: 24px; height: 24px; }
  23. .svg-ic_fast_rewind_24px-dims { width: 24px; height: 24px; }
  24. .svg-ic_games_24px-dims { width: 24px; height: 24px; }
  25. .svg-ic_hearing_24px-dims { width: 24px; height: 24px; }
  26. .svg-ic_high_quality_24px-dims { width: 24px; height: 24px; }
  27. .svg-ic_loop_24px-dims { width: 24px; height: 24px; }
  28. .svg-ic_mic_24px-dims { width: 24px; height: 24px; }
  29. .svg-ic_mic_none_24px-dims { width: 24px; height: 24px; }
  30. .svg-ic_mic_off_24px-dims { width: 24px; height: 24px; }
  31. .svg-ic_movie_24px-dims { width: 24px; height: 24px; }
  32. .svg-ic_my_library_add_24px-dims { width: 24px; height: 24px; }
  33. .svg-ic_my_library_books_24px-dims { width: 24px; height: 24px; }
  34. .svg-ic_my_library_music_24px-dims { width: 24px; height: 24px; }
  35. .svg-ic_new_releases_24px-dims { width: 24px; height: 24px; }
  36. .svg-ic_not_interested_24px-dims { width: 24px; height: 24px; }
  37. .svg-ic_pause_24px-dims { width: 24px; height: 24px; }
  38. .svg-ic_pause_circle_fill_24px-dims { width: 24px; height: 24px; }
  39. .svg-ic_pause_circle_outline_24px-dims { width: 24px; height: 24px; }
  40. .svg-ic_play_arrow_24px-dims { width: 24px; height: 24px; }
  41. .svg-ic_play_circle_fill_24px-dims { width: 24px; height: 24px; }
  42. .svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; }
  43. .svg-ic_play_shopping_bag_24px-dims { width: 24px; height: 24px; }
  44. .svg-ic_playlist_add_24px-dims { width: 24px; height: 24px; }
  45. .svg-ic_queue_24px-dims { width: 24px; height: 24px; }
  46. .svg-ic_queue_music_24px-dims { width: 24px; height: 24px; }
  47. .svg-ic_radio_24px-dims { width: 24px; height: 24px; }
  48. .svg-ic_recent_actors_24px-dims { width: 24px; height: 24px; }
  49. .svg-ic_repeat_24px-dims { width: 24px; height: 24px; }
  50. .svg-ic_repeat_one_24px-dims { width: 24px; height: 24px; }
  51. .svg-ic_replay_24px-dims { width: 24px; height: 24px; }
  52. .svg-ic_shuffle_24px-dims { width: 24px; height: 24px; }
  53. .svg-ic_skip_next_24px-dims { width: 24px; height: 24px; }
  54. .svg-ic_skip_previous_24px-dims { width: 24px; height: 24px; }
  55. .svg-ic_snooze_24px-dims { width: 24px; height: 24px; }
  56. .svg-ic_stop_24px-dims { width: 24px; height: 24px; }
  57. .svg-ic_subtitles_24px-dims { width: 24px; height: 24px; }
  58. .svg-ic_surround_sound_24px-dims { width: 24px; height: 24px; }
  59. .svg-ic_video_collection_24px-dims { width: 24px; height: 24px; }
  60. .svg-ic_videocam_24px-dims { width: 24px; height: 24px; }
  61. .svg-ic_videocam_off_24px-dims { width: 24px; height: 24px; }
  62. .svg-ic_volume_down_24px-dims { width: 24px; height: 24px; }
  63. .svg-ic_volume_mute_24px-dims { width: 24px; height: 24px; }
  64. .svg-ic_volume_off_24px-dims { width: 24px; height: 24px; }
  65. .svg-ic_volume_up_24px-dims { width: 24px; height: 24px; }
  66. .svg-ic_web_24px-dims { width: 24px; height: 24px; }
  67. </style>
  68. <!--
  69. ====================================================================================================
  70. -->
  71. </head>
  72. <body>
  73. <!--
  74. Inline SVG sprite
  75. ====================================================================================================
  76. This is an inlined version of the generated SVG sprite. The single images may be <use>d everywhere
  77. below within this document. Please see https://github.com/jkphl/svg-sprite#inline-embedding for
  78. further details on how to create this embeddable sprite variant.
  79. -->
  80. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">
  81. <defs>
  82. <svg width="24" height="24" viewBox="0 0 24 24" id="ic_album_24px" y="0"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_av_timer_24px" y="24"><path d="M11 17c0 .55.45 1 1 1s1-.45 1-1-.45-1-1-1-1 .45-1 1zm0-14v4h2V5.08c3.39.49 6 3.39 6 6.92 0 3.87-3.13 7-7 7s-7-3.13-7-7c0-1.68.59-3.22 1.58-4.42L12 13l1.41-1.41-6.8-6.8v.02C4.42 6.45 3 9.05 3 12c0 4.97 4.02 9 9 9 4.97 0 9-4.03 9-9s-4.03-9-9-9h-1zm7 9c0-.55-.45-1-1-1s-1 .45-1 1 .45 1 1 1 1-.45 1-1zM6 12c0 .55.45 1 1 1s1-.45 1-1-.45-1-1-1-1 .45-1 1z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_closed_caption_24px" y="48"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_equalizer_24px" y="72"><path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_explicit_24px" y="96"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h4v2h-4v2h4v2H9V7h6v2z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_fast_forward_24px" y="120"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_fast_rewind_24px" y="144"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_games_24px" y="168"><path d="M15 7.5V2H9v5.5l3 3 3-3zM7.5 9H2v6h5.5l3-3-3-3zM9 16.5V22h6v-5.5l-3-3-3 3zM16.5 9l-3 3 3 3H22V9h-5.5z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_hearing_24px" y="192"><path d="M17 20c-.29 0-.56-.06-.76-.15-.71-.37-1.21-.88-1.71-2.38-.51-1.56-1.47-2.29-2.39-3-.79-.61-1.61-1.24-2.32-2.53C9.29 10.98 9 9.93 9 9c0-2.8 2.2-5 5-5s5 2.2 5 5h2c0-3.93-3.07-7-7-7S7 5.07 7 9c0 1.26.38 2.65 1.07 3.9.91 1.65 1.98 2.48 2.85 3.15.81.62 1.39 1.07 1.71 2.05.6 1.82 1.37 2.84 2.73 3.55.51.23 1.07.35 1.64.35 2.21 0 4-1.79 4-4h-2c0 1.1-.9 2-2 2zM7.64 2.64L6.22 1.22C4.23 3.21 3 5.96 3 9s1.23 5.79 3.22 7.78l1.41-1.41C6.01 13.74 5 11.49 5 9s1.01-4.74 2.64-6.36zM11.5 9c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5-2.5 1.12-2.5 2.5z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_high_quality_24px" y="216"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 11H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm7-1c0 .55-.45 1-1 1h-.75v1.5h-1.5V15H14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v4zm-3.5-.5h2v-3h-2v3z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_loop_24px" y="240"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_mic_24px" y="264"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_mic_none_24px" y="288"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1.2-9.1c0-.66.54-1.2 1.2-1.2.66 0 1.2.54 1.2 1.2l-.01 6.2c0 .66-.53 1.2-1.19 1.2-.66 0-1.2-.54-1.2-1.2V4.9zm6.5 6.1c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_mic_off_24px" y="312"><path d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_movie_24px" y="336"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_my_library_add_24px" y="360"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9h-4v4h-2v-4H9V9h4V5h2v4h4v2z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_my_library_books_24px" y="384"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_my_library_music_24px" y="408"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 5h-3v5.5c0 1.38-1.12 2.5-2.5 2.5S10 13.88 10 12.5s1.12-2.5 2.5-2.5c.57 0 1.08.19 1.5.51V5h4v2zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_new_releases_24px" y="432"><path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12zm-10 5h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_not_interested_24px" y="456"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_pause_24px" y="480"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_pause_circle_fill_24px" y="504"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_pause_circle_outline_24px" y="528"><path d="M9 16h2V8H9v8zm3-14C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-4h2V8h-2v8z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_play_arrow_24px" y="552"><path d="M8 5v14l11-7z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_play_circle_fill_24px" y="576"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_play_circle_outline_24px" y="600"><path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_play_shopping_bag_24px" y="624"><path d="M16 6V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H2v13c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6h-6zm-6-2h4v2h-4V4zM9 18V9l7.5 4L9 18z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_playlist_add_24px" y="648"><path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_queue_24px" y="672"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9h-4v4h-2v-4H9V9h4V5h2v4h4v2z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_queue_music_24px" y="696"><path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_radio_24px" y="720"><path d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.89 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.11-.89-2-2-2H8.3l8.26-3.34L15.88 1 3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-2h-2v2H4V8h16v4z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_recent_actors_24px" y="744"><path d="M21 5v14h2V5h-2zm-4 14h2V5h-2v14zM14 5H2c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM8 7.75c1.24 0 2.25 1.01 2.25 2.25S9.24 12.25 8 12.25 5.75 11.24 5.75 10 6.76 7.75 8 7.75zM12.5 17h-9v-.75c0-1.5 3-2.25 4.5-2.25s4.5.75 4.5 2.25V17z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_repeat_24px" y="768"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_repeat_one_24px" y="792"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_replay_24px" y="816"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_shuffle_24px" y="840"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_skip_next_24px" y="864"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_skip_previous_24px" y="888"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_snooze_24px" y="912"><path d="M7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-3-9h3.63L9 15.2V17h6v-2h-3.63L15 10.8V9H9v2z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_stop_24px" y="936"><path d="M6 6h12v12H6z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_subtitles_24px" y="960"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_surround_sound_24px" y="984"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.76 16.24l-1.41 1.41C4.78 16.1 4 14.05 4 12c0-2.05.78-4.1 2.34-5.66l1.41 1.41C6.59 8.93 6 10.46 6 12s.59 3.07 1.76 4.24zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm5.66 1.66l-1.41-1.41C17.41 15.07 18 13.54 18 12s-.59-3.07-1.76-4.24l1.41-1.41C19.22 7.9 20 9.95 20 12c0 2.05-.78 4.1-2.34 5.66zM12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_video_collection_24px" y="1008"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_videocam_24px" y="1032"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_videocam_off_24px" y="1056"><path d="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_volume_down_24px" y="1080"><path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_volume_mute_24px" y="1104"><path d="M7 9v6h4l5 5V4l-5 5H7z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_volume_off_24px" y="1128"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_volume_up_24px" y="1152"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_web_24px" y="1176"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z"/></svg> </defs>
  83. </svg><!--
  84. ====================================================================================================
  85. -->
  86. <header>
  87. <h1>SVG sprite preview</h1>
  88. <p>This preview features two methods of using the generated sprite in conjunction with inline SVG. Please have a look at the HTML source for further details and be aware of the following constraints:</p>
  89. <ul>
  90. <li>Your browser has to <a href="http://caniuse.com/svg-html5" target="_blank">support inline SVG</a> for these techniques to work.</li>
  91. <li>The embedded sprite (A) slightly differs from the generated external one. Please <a href="https://github.com/jkphl/svg-sprite#inline-embedding" target="_blank">see the documentation</a> for details on how to create such an embeddable sprite.</li>
  92. <li>Internet Explorer up to version 11 doesn't support external sprites for use with inline SVG. For IE 9-11, you may polyfill this functionality with <a href="https://github.com/jonathantneal/svg4everybody" target="_blank">SVG for Everybody</a>.</li>
  93. </ul>
  94. </header>
  95. <section>
  96. <!--
  97. Inline SVG with embedded sprite
  98. ====================================================================================================
  99. These SVG images make use of fragment identifiers (IDs) and are extracted out of the inline sprite
  100. embedded above. They may be styled via CSS.
  101. -->
  102. <h3>A) Inline SVG with embedded sprite</h3>
  103. <ul>
  104. <li title="ic_album_24px">
  105. <div class="icon-box">
  106. <!-- ic_album_24px -->
  107. <svg viewBox="0 0 24 24" class="svg-ic_album_24px svg-ic_album_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  108. <use xlink:href="#ic_album_24px"></use>
  109. </svg>
  110. </div>
  111. <h2>ic_album_24px</h2>
  112. </li>
  113. <li title="ic_av_timer_24px">
  114. <div class="icon-box">
  115. <!-- ic_av_timer_24px -->
  116. <svg viewBox="0 24 24 24" class="svg-ic_av_timer_24px svg-ic_av_timer_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  117. <use xlink:href="#ic_av_timer_24px"></use>
  118. </svg>
  119. </div>
  120. <h2>ic_av_timer_24px</h2>
  121. </li>
  122. <li title="ic_closed_caption_24px">
  123. <div class="icon-box">
  124. <!-- ic_closed_caption_24px -->
  125. <svg viewBox="0 48 24 24" class="svg-ic_closed_caption_24px svg-ic_closed_caption_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  126. <use xlink:href="#ic_closed_caption_24px"></use>
  127. </svg>
  128. </div>
  129. <h2>ic_closed_caption_24px</h2>
  130. </li>
  131. <li title="ic_equalizer_24px">
  132. <div class="icon-box">
  133. <!-- ic_equalizer_24px -->
  134. <svg viewBox="0 72 24 24" class="svg-ic_equalizer_24px svg-ic_equalizer_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  135. <use xlink:href="#ic_equalizer_24px"></use>
  136. </svg>
  137. </div>
  138. <h2>ic_equalizer_24px</h2>
  139. </li>
  140. <li title="ic_explicit_24px">
  141. <div class="icon-box">
  142. <!-- ic_explicit_24px -->
  143. <svg viewBox="0 96 24 24" class="svg-ic_explicit_24px svg-ic_explicit_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  144. <use xlink:href="#ic_explicit_24px"></use>
  145. </svg>
  146. </div>
  147. <h2>ic_explicit_24px</h2>
  148. </li>
  149. <li title="ic_fast_forward_24px">
  150. <div class="icon-box">
  151. <!-- ic_fast_forward_24px -->
  152. <svg viewBox="0 120 24 24" class="svg-ic_fast_forward_24px svg-ic_fast_forward_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  153. <use xlink:href="#ic_fast_forward_24px"></use>
  154. </svg>
  155. </div>
  156. <h2>ic_fast_forward_24px</h2>
  157. </li>
  158. <li title="ic_fast_rewind_24px">
  159. <div class="icon-box">
  160. <!-- ic_fast_rewind_24px -->
  161. <svg viewBox="0 144 24 24" class="svg-ic_fast_rewind_24px svg-ic_fast_rewind_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  162. <use xlink:href="#ic_fast_rewind_24px"></use>
  163. </svg>
  164. </div>
  165. <h2>ic_fast_rewind_24px</h2>
  166. </li>
  167. <li title="ic_games_24px">
  168. <div class="icon-box">
  169. <!-- ic_games_24px -->
  170. <svg viewBox="0 168 24 24" class="svg-ic_games_24px svg-ic_games_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  171. <use xlink:href="#ic_games_24px"></use>
  172. </svg>
  173. </div>
  174. <h2>ic_games_24px</h2>
  175. </li>
  176. <li title="ic_hearing_24px">
  177. <div class="icon-box">
  178. <!-- ic_hearing_24px -->
  179. <svg viewBox="0 192 24 24" class="svg-ic_hearing_24px svg-ic_hearing_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  180. <use xlink:href="#ic_hearing_24px"></use>
  181. </svg>
  182. </div>
  183. <h2>ic_hearing_24px</h2>
  184. </li>
  185. <li title="ic_high_quality_24px">
  186. <div class="icon-box">
  187. <!-- ic_high_quality_24px -->
  188. <svg viewBox="0 216 24 24" class="svg-ic_high_quality_24px svg-ic_high_quality_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  189. <use xlink:href="#ic_high_quality_24px"></use>
  190. </svg>
  191. </div>
  192. <h2>ic_high_quality_24px</h2>
  193. </li>
  194. <li title="ic_loop_24px">
  195. <div class="icon-box">
  196. <!-- ic_loop_24px -->
  197. <svg viewBox="0 240 24 24" class="svg-ic_loop_24px svg-ic_loop_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  198. <use xlink:href="#ic_loop_24px"></use>
  199. </svg>
  200. </div>
  201. <h2>ic_loop_24px</h2>
  202. </li>
  203. <li title="ic_mic_24px">
  204. <div class="icon-box">
  205. <!-- ic_mic_24px -->
  206. <svg viewBox="0 264 24 24" class="svg-ic_mic_24px svg-ic_mic_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  207. <use xlink:href="#ic_mic_24px"></use>
  208. </svg>
  209. </div>
  210. <h2>ic_mic_24px</h2>
  211. </li>
  212. <li title="ic_mic_none_24px">
  213. <div class="icon-box">
  214. <!-- ic_mic_none_24px -->
  215. <svg viewBox="0 288 24 24" class="svg-ic_mic_none_24px svg-ic_mic_none_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  216. <use xlink:href="#ic_mic_none_24px"></use>
  217. </svg>
  218. </div>
  219. <h2>ic_mic_none_24px</h2>
  220. </li>
  221. <li title="ic_mic_off_24px">
  222. <div class="icon-box">
  223. <!-- ic_mic_off_24px -->
  224. <svg viewBox="0 312 24 24" class="svg-ic_mic_off_24px svg-ic_mic_off_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  225. <use xlink:href="#ic_mic_off_24px"></use>
  226. </svg>
  227. </div>
  228. <h2>ic_mic_off_24px</h2>
  229. </li>
  230. <li title="ic_movie_24px">
  231. <div class="icon-box">
  232. <!-- ic_movie_24px -->
  233. <svg viewBox="0 336 24 24" class="svg-ic_movie_24px svg-ic_movie_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  234. <use xlink:href="#ic_movie_24px"></use>
  235. </svg>
  236. </div>
  237. <h2>ic_movie_24px</h2>
  238. </li>
  239. <li title="ic_my_library_add_24px">
  240. <div class="icon-box">
  241. <!-- ic_my_library_add_24px -->
  242. <svg viewBox="0 360 24 24" class="svg-ic_my_library_add_24px svg-ic_my_library_add_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  243. <use xlink:href="#ic_my_library_add_24px"></use>
  244. </svg>
  245. </div>
  246. <h2>ic_my_library_add_24px</h2>
  247. </li>
  248. <li title="ic_my_library_books_24px">
  249. <div class="icon-box">
  250. <!-- ic_my_library_books_24px -->
  251. <svg viewBox="0 384 24 24" class="svg-ic_my_library_books_24px svg-ic_my_library_books_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  252. <use xlink:href="#ic_my_library_books_24px"></use>
  253. </svg>
  254. </div>
  255. <h2>ic_my_library_books_24px</h2>
  256. </li>
  257. <li title="ic_my_library_music_24px">
  258. <div class="icon-box">
  259. <!-- ic_my_library_music_24px -->
  260. <svg viewBox="0 408 24 24" class="svg-ic_my_library_music_24px svg-ic_my_library_music_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  261. <use xlink:href="#ic_my_library_music_24px"></use>
  262. </svg>
  263. </div>
  264. <h2>ic_my_library_music_24px</h2>
  265. </li>
  266. <li title="ic_new_releases_24px">
  267. <div class="icon-box">
  268. <!-- ic_new_releases_24px -->
  269. <svg viewBox="0 432 24 24" class="svg-ic_new_releases_24px svg-ic_new_releases_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  270. <use xlink:href="#ic_new_releases_24px"></use>
  271. </svg>
  272. </div>
  273. <h2>ic_new_releases_24px</h2>
  274. </li>
  275. <li title="ic_not_interested_24px">
  276. <div class="icon-box">
  277. <!-- ic_not_interested_24px -->
  278. <svg viewBox="0 456 24 24" class="svg-ic_not_interested_24px svg-ic_not_interested_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  279. <use xlink:href="#ic_not_interested_24px"></use>
  280. </svg>
  281. </div>
  282. <h2>ic_not_interested_24px</h2>
  283. </li>
  284. <li title="ic_pause_24px">
  285. <div class="icon-box">
  286. <!-- ic_pause_24px -->
  287. <svg viewBox="0 480 24 24" class="svg-ic_pause_24px svg-ic_pause_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  288. <use xlink:href="#ic_pause_24px"></use>
  289. </svg>
  290. </div>
  291. <h2>ic_pause_24px</h2>
  292. </li>
  293. <li title="ic_pause_circle_fill_24px">
  294. <div class="icon-box">
  295. <!-- ic_pause_circle_fill_24px -->
  296. <svg viewBox="0 504 24 24" class="svg-ic_pause_circle_fill_24px svg-ic_pause_circle_fill_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  297. <use xlink:href="#ic_pause_circle_fill_24px"></use>
  298. </svg>
  299. </div>
  300. <h2>ic_pause_circle_fill_24px</h2>
  301. </li>
  302. <li title="ic_pause_circle_outline_24px">
  303. <div class="icon-box">
  304. <!-- ic_pause_circle_outline_24px -->
  305. <svg viewBox="0 528 24 24" class="svg-ic_pause_circle_outline_24px svg-ic_pause_circle_outline_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  306. <use xlink:href="#ic_pause_circle_outline_24px"></use>
  307. </svg>
  308. </div>
  309. <h2>ic_pause_circle_outline_24px</h2>
  310. </li>
  311. <li title="ic_play_arrow_24px">
  312. <div class="icon-box">
  313. <!-- ic_play_arrow_24px -->
  314. <svg viewBox="0 552 24 24" class="svg-ic_play_arrow_24px svg-ic_play_arrow_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  315. <use xlink:href="#ic_play_arrow_24px"></use>
  316. </svg>
  317. </div>
  318. <h2>ic_play_arrow_24px</h2>
  319. </li>
  320. <li title="ic_play_circle_fill_24px">
  321. <div class="icon-box">
  322. <!-- ic_play_circle_fill_24px -->
  323. <svg viewBox="0 576 24 24" class="svg-ic_play_circle_fill_24px svg-ic_play_circle_fill_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  324. <use xlink:href="#ic_play_circle_fill_24px"></use>
  325. </svg>
  326. </div>
  327. <h2>ic_play_circle_fill_24px</h2>
  328. </li>
  329. <li title="ic_play_circle_outline_24px">
  330. <div class="icon-box">
  331. <!-- ic_play_circle_outline_24px -->
  332. <svg viewBox="0 600 24 24" class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  333. <use xlink:href="#ic_play_circle_outline_24px"></use>
  334. </svg>
  335. </div>
  336. <h2>ic_play_circle_outline_24px</h2>
  337. </li>
  338. <li title="ic_play_shopping_bag_24px">
  339. <div class="icon-box">
  340. <!-- ic_play_shopping_bag_24px -->
  341. <svg viewBox="0 624 24 24" class="svg-ic_play_shopping_bag_24px svg-ic_play_shopping_bag_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  342. <use xlink:href="#ic_play_shopping_bag_24px"></use>
  343. </svg>
  344. </div>
  345. <h2>ic_play_shopping_bag_24px</h2>
  346. </li>
  347. <li title="ic_playlist_add_24px">
  348. <div class="icon-box">
  349. <!-- ic_playlist_add_24px -->
  350. <svg viewBox="0 648 24 24" class="svg-ic_playlist_add_24px svg-ic_playlist_add_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  351. <use xlink:href="#ic_playlist_add_24px"></use>
  352. </svg>
  353. </div>
  354. <h2>ic_playlist_add_24px</h2>
  355. </li>
  356. <li title="ic_queue_24px">
  357. <div class="icon-box">
  358. <!-- ic_queue_24px -->
  359. <svg viewBox="0 672 24 24" class="svg-ic_queue_24px svg-ic_queue_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  360. <use xlink:href="#ic_queue_24px"></use>
  361. </svg>
  362. </div>
  363. <h2>ic_queue_24px</h2>
  364. </li>
  365. <li title="ic_queue_music_24px">
  366. <div class="icon-box">
  367. <!-- ic_queue_music_24px -->
  368. <svg viewBox="0 696 24 24" class="svg-ic_queue_music_24px svg-ic_queue_music_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  369. <use xlink:href="#ic_queue_music_24px"></use>
  370. </svg>
  371. </div>
  372. <h2>ic_queue_music_24px</h2>
  373. </li>
  374. <li title="ic_radio_24px">
  375. <div class="icon-box">
  376. <!-- ic_radio_24px -->
  377. <svg viewBox="0 720 24 24" class="svg-ic_radio_24px svg-ic_radio_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  378. <use xlink:href="#ic_radio_24px"></use>
  379. </svg>
  380. </div>
  381. <h2>ic_radio_24px</h2>
  382. </li>
  383. <li title="ic_recent_actors_24px">
  384. <div class="icon-box">
  385. <!-- ic_recent_actors_24px -->
  386. <svg viewBox="0 744 24 24" class="svg-ic_recent_actors_24px svg-ic_recent_actors_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  387. <use xlink:href="#ic_recent_actors_24px"></use>
  388. </svg>
  389. </div>
  390. <h2>ic_recent_actors_24px</h2>
  391. </li>
  392. <li title="ic_repeat_24px">
  393. <div class="icon-box">
  394. <!-- ic_repeat_24px -->
  395. <svg viewBox="0 768 24 24" class="svg-ic_repeat_24px svg-ic_repeat_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  396. <use xlink:href="#ic_repeat_24px"></use>
  397. </svg>
  398. </div>
  399. <h2>ic_repeat_24px</h2>
  400. </li>
  401. <li title="ic_repeat_one_24px">
  402. <div class="icon-box">
  403. <!-- ic_repeat_one_24px -->
  404. <svg viewBox="0 792 24 24" class="svg-ic_repeat_one_24px svg-ic_repeat_one_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  405. <use xlink:href="#ic_repeat_one_24px"></use>
  406. </svg>
  407. </div>
  408. <h2>ic_repeat_one_24px</h2>
  409. </li>
  410. <li title="ic_replay_24px">
  411. <div class="icon-box">
  412. <!-- ic_replay_24px -->
  413. <svg viewBox="0 816 24 24" class="svg-ic_replay_24px svg-ic_replay_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  414. <use xlink:href="#ic_replay_24px"></use>
  415. </svg>
  416. </div>
  417. <h2>ic_replay_24px</h2>
  418. </li>
  419. <li title="ic_shuffle_24px">
  420. <div class="icon-box">
  421. <!-- ic_shuffle_24px -->
  422. <svg viewBox="0 840 24 24" class="svg-ic_shuffle_24px svg-ic_shuffle_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  423. <use xlink:href="#ic_shuffle_24px"></use>
  424. </svg>
  425. </div>
  426. <h2>ic_shuffle_24px</h2>
  427. </li>
  428. <li title="ic_skip_next_24px">
  429. <div class="icon-box">
  430. <!-- ic_skip_next_24px -->
  431. <svg viewBox="0 864 24 24" class="svg-ic_skip_next_24px svg-ic_skip_next_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  432. <use xlink:href="#ic_skip_next_24px"></use>
  433. </svg>
  434. </div>
  435. <h2>ic_skip_next_24px</h2>
  436. </li>
  437. <li title="ic_skip_previous_24px">
  438. <div class="icon-box">
  439. <!-- ic_skip_previous_24px -->
  440. <svg viewBox="0 888 24 24" class="svg-ic_skip_previous_24px svg-ic_skip_previous_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  441. <use xlink:href="#ic_skip_previous_24px"></use>
  442. </svg>
  443. </div>
  444. <h2>ic_skip_previous_24px</h2>
  445. </li>
  446. <li title="ic_snooze_24px">
  447. <div class="icon-box">
  448. <!-- ic_snooze_24px -->
  449. <svg viewBox="0 912 24 24" class="svg-ic_snooze_24px svg-ic_snooze_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  450. <use xlink:href="#ic_snooze_24px"></use>
  451. </svg>
  452. </div>
  453. <h2>ic_snooze_24px</h2>
  454. </li>
  455. <li title="ic_stop_24px">
  456. <div class="icon-box">
  457. <!-- ic_stop_24px -->
  458. <svg viewBox="0 936 24 24" class="svg-ic_stop_24px svg-ic_stop_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  459. <use xlink:href="#ic_stop_24px"></use>
  460. </svg>
  461. </div>
  462. <h2>ic_stop_24px</h2>
  463. </li>
  464. <li title="ic_subtitles_24px">
  465. <div class="icon-box">
  466. <!-- ic_subtitles_24px -->
  467. <svg viewBox="0 960 24 24" class="svg-ic_subtitles_24px svg-ic_subtitles_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  468. <use xlink:href="#ic_subtitles_24px"></use>
  469. </svg>
  470. </div>
  471. <h2>ic_subtitles_24px</h2>
  472. </li>
  473. <li title="ic_surround_sound_24px">
  474. <div class="icon-box">
  475. <!-- ic_surround_sound_24px -->
  476. <svg viewBox="0 984 24 24" class="svg-ic_surround_sound_24px svg-ic_surround_sound_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  477. <use xlink:href="#ic_surround_sound_24px"></use>
  478. </svg>
  479. </div>
  480. <h2>ic_surround_sound_24px</h2>
  481. </li>
  482. <li title="ic_video_collection_24px">
  483. <div class="icon-box">
  484. <!-- ic_video_collection_24px -->
  485. <svg viewBox="0 1008 24 24" class="svg-ic_video_collection_24px svg-ic_video_collection_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  486. <use xlink:href="#ic_video_collection_24px"></use>
  487. </svg>
  488. </div>
  489. <h2>ic_video_collection_24px</h2>
  490. </li>
  491. <li title="ic_videocam_24px">
  492. <div class="icon-box">
  493. <!-- ic_videocam_24px -->
  494. <svg viewBox="0 1032 24 24" class="svg-ic_videocam_24px svg-ic_videocam_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  495. <use xlink:href="#ic_videocam_24px"></use>
  496. </svg>
  497. </div>
  498. <h2>ic_videocam_24px</h2>
  499. </li>
  500. <li title="ic_videocam_off_24px">
  501. <div class="icon-box">
  502. <!-- ic_videocam_off_24px -->
  503. <svg viewBox="0 1056 24 24" class="svg-ic_videocam_off_24px svg-ic_videocam_off_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  504. <use xlink:href="#ic_videocam_off_24px"></use>
  505. </svg>
  506. </div>
  507. <h2>ic_videocam_off_24px</h2>
  508. </li>
  509. <li title="ic_volume_down_24px">
  510. <div class="icon-box">
  511. <!-- ic_volume_down_24px -->
  512. <svg viewBox="0 1080 24 24" class="svg-ic_volume_down_24px svg-ic_volume_down_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  513. <use xlink:href="#ic_volume_down_24px"></use>
  514. </svg>
  515. </div>
  516. <h2>ic_volume_down_24px</h2>
  517. </li>
  518. <li title="ic_volume_mute_24px">
  519. <div class="icon-box">
  520. <!-- ic_volume_mute_24px -->
  521. <svg viewBox="0 1104 24 24" class="svg-ic_volume_mute_24px svg-ic_volume_mute_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  522. <use xlink:href="#ic_volume_mute_24px"></use>
  523. </svg>
  524. </div>
  525. <h2>ic_volume_mute_24px</h2>
  526. </li>
  527. <li title="ic_volume_off_24px">
  528. <div class="icon-box">
  529. <!-- ic_volume_off_24px -->
  530. <svg viewBox="0 1128 24 24" class="svg-ic_volume_off_24px svg-ic_volume_off_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  531. <use xlink:href="#ic_volume_off_24px"></use>
  532. </svg>
  533. </div>
  534. <h2>ic_volume_off_24px</h2>
  535. </li>
  536. <li title="ic_volume_up_24px">
  537. <div class="icon-box">
  538. <!-- ic_volume_up_24px -->
  539. <svg viewBox="0 1152 24 24" class="svg-ic_volume_up_24px svg-ic_volume_up_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  540. <use xlink:href="#ic_volume_up_24px"></use>
  541. </svg>
  542. </div>
  543. <h2>ic_volume_up_24px</h2>
  544. </li>
  545. <li title="ic_web_24px">
  546. <div class="icon-box">
  547. <!-- ic_web_24px -->
  548. <svg viewBox="0 1176 24 24" class="svg-ic_web_24px svg-ic_web_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  549. <use xlink:href="#ic_web_24px"></use>
  550. </svg>
  551. </div>
  552. <h2>ic_web_24px</h2>
  553. </li>
  554. </ul>
  555. <!--
  556. ====================================================================================================
  557. -->
  558. <!--
  559. Inline SVG with external sprite
  560. ====================================================================================================
  561. These SVG images make use of an URL + fragment identifiers (IDs) and refer to the regular external
  562. SVG sprite. They may be styled via CSS. (IE 9-11 with polyfill only)
  563. -->
  564. <h3>B) Inline SVG with external sprite (IE 9-11 with polyfill only)</h3>
  565. <ul>
  566. <li title="ic_album_24px">
  567. <div class="icon-box">
  568. <!-- ic_album_24px -->
  569. <svg viewBox="0 0 24 24" class="svg-ic_album_24px svg-ic_album_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  570. <use xlink:href="svg/sprite.svg#ic_album_24px"></use>
  571. </svg>
  572. </div>
  573. <h2>ic_album_24px</h2>
  574. </li>
  575. <li title="ic_av_timer_24px">
  576. <div class="icon-box">
  577. <!-- ic_av_timer_24px -->
  578. <svg viewBox="0 24 24 24" class="svg-ic_av_timer_24px svg-ic_av_timer_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  579. <use xlink:href="svg/sprite.svg#ic_av_timer_24px"></use>
  580. </svg>
  581. </div>
  582. <h2>ic_av_timer_24px</h2>
  583. </li>
  584. <li title="ic_closed_caption_24px">
  585. <div class="icon-box">
  586. <!-- ic_closed_caption_24px -->
  587. <svg viewBox="0 48 24 24" class="svg-ic_closed_caption_24px svg-ic_closed_caption_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  588. <use xlink:href="svg/sprite.svg#ic_closed_caption_24px"></use>
  589. </svg>
  590. </div>
  591. <h2>ic_closed_caption_24px</h2>
  592. </li>
  593. <li title="ic_equalizer_24px">
  594. <div class="icon-box">
  595. <!-- ic_equalizer_24px -->
  596. <svg viewBox="0 72 24 24" class="svg-ic_equalizer_24px svg-ic_equalizer_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  597. <use xlink:href="svg/sprite.svg#ic_equalizer_24px"></use>
  598. </svg>
  599. </div>
  600. <h2>ic_equalizer_24px</h2>
  601. </li>
  602. <li title="ic_explicit_24px">
  603. <div class="icon-box">
  604. <!-- ic_explicit_24px -->
  605. <svg viewBox="0 96 24 24" class="svg-ic_explicit_24px svg-ic_explicit_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  606. <use xlink:href="svg/sprite.svg#ic_explicit_24px"></use>
  607. </svg>
  608. </div>
  609. <h2>ic_explicit_24px</h2>
  610. </li>
  611. <li title="ic_fast_forward_24px">
  612. <div class="icon-box">
  613. <!-- ic_fast_forward_24px -->
  614. <svg viewBox="0 120 24 24" class="svg-ic_fast_forward_24px svg-ic_fast_forward_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  615. <use xlink:href="svg/sprite.svg#ic_fast_forward_24px"></use>
  616. </svg>
  617. </div>
  618. <h2>ic_fast_forward_24px</h2>
  619. </li>
  620. <li title="ic_fast_rewind_24px">
  621. <div class="icon-box">
  622. <!-- ic_fast_rewind_24px -->
  623. <svg viewBox="0 144 24 24" class="svg-ic_fast_rewind_24px svg-ic_fast_rewind_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  624. <use xlink:href="svg/sprite.svg#ic_fast_rewind_24px"></use>
  625. </svg>
  626. </div>
  627. <h2>ic_fast_rewind_24px</h2>
  628. </li>
  629. <li title="ic_games_24px">
  630. <div class="icon-box">
  631. <!-- ic_games_24px -->
  632. <svg viewBox="0 168 24 24" class="svg-ic_games_24px svg-ic_games_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  633. <use xlink:href="svg/sprite.svg#ic_games_24px"></use>
  634. </svg>
  635. </div>
  636. <h2>ic_games_24px</h2>
  637. </li>
  638. <li title="ic_hearing_24px">
  639. <div class="icon-box">
  640. <!-- ic_hearing_24px -->
  641. <svg viewBox="0 192 24 24" class="svg-ic_hearing_24px svg-ic_hearing_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  642. <use xlink:href="svg/sprite.svg#ic_hearing_24px"></use>
  643. </svg>
  644. </div>
  645. <h2>ic_hearing_24px</h2>
  646. </li>
  647. <li title="ic_high_quality_24px">
  648. <div class="icon-box">
  649. <!-- ic_high_quality_24px -->
  650. <svg viewBox="0 216 24 24" class="svg-ic_high_quality_24px svg-ic_high_quality_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  651. <use xlink:href="svg/sprite.svg#ic_high_quality_24px"></use>
  652. </svg>
  653. </div>
  654. <h2>ic_high_quality_24px</h2>
  655. </li>
  656. <li title="ic_loop_24px">
  657. <div class="icon-box">
  658. <!-- ic_loop_24px -->
  659. <svg viewBox="0 240 24 24" class="svg-ic_loop_24px svg-ic_loop_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  660. <use xlink:href="svg/sprite.svg#ic_loop_24px"></use>
  661. </svg>
  662. </div>
  663. <h2>ic_loop_24px</h2>
  664. </li>
  665. <li title="ic_mic_24px">
  666. <div class="icon-box">
  667. <!-- ic_mic_24px -->
  668. <svg viewBox="0 264 24 24" class="svg-ic_mic_24px svg-ic_mic_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  669. <use xlink:href="svg/sprite.svg#ic_mic_24px"></use>
  670. </svg>
  671. </div>
  672. <h2>ic_mic_24px</h2>
  673. </li>
  674. <li title="ic_mic_none_24px">
  675. <div class="icon-box">
  676. <!-- ic_mic_none_24px -->
  677. <svg viewBox="0 288 24 24" class="svg-ic_mic_none_24px svg-ic_mic_none_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  678. <use xlink:href="svg/sprite.svg#ic_mic_none_24px"></use>
  679. </svg>
  680. </div>
  681. <h2>ic_mic_none_24px</h2>
  682. </li>
  683. <li title="ic_mic_off_24px">
  684. <div class="icon-box">
  685. <!-- ic_mic_off_24px -->
  686. <svg viewBox="0 312 24 24" class="svg-ic_mic_off_24px svg-ic_mic_off_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  687. <use xlink:href="svg/sprite.svg#ic_mic_off_24px"></use>
  688. </svg>
  689. </div>
  690. <h2>ic_mic_off_24px</h2>
  691. </li>
  692. <li title="ic_movie_24px">
  693. <div class="icon-box">
  694. <!-- ic_movie_24px -->
  695. <svg viewBox="0 336 24 24" class="svg-ic_movie_24px svg-ic_movie_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  696. <use xlink:href="svg/sprite.svg#ic_movie_24px"></use>
  697. </svg>
  698. </div>
  699. <h2>ic_movie_24px</h2>
  700. </li>
  701. <li title="ic_my_library_add_24px">
  702. <div class="icon-box">
  703. <!-- ic_my_library_add_24px -->
  704. <svg viewBox="0 360 24 24" class="svg-ic_my_library_add_24px svg-ic_my_library_add_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  705. <use xlink:href="svg/sprite.svg#ic_my_library_add_24px"></use>
  706. </svg>
  707. </div>
  708. <h2>ic_my_library_add_24px</h2>
  709. </li>
  710. <li title="ic_my_library_books_24px">
  711. <div class="icon-box">
  712. <!-- ic_my_library_books_24px -->
  713. <svg viewBox="0 384 24 24" class="svg-ic_my_library_books_24px svg-ic_my_library_books_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  714. <use xlink:href="svg/sprite.svg#ic_my_library_books_24px"></use>
  715. </svg>
  716. </div>
  717. <h2>ic_my_library_books_24px</h2>
  718. </li>
  719. <li title="ic_my_library_music_24px">
  720. <div class="icon-box">
  721. <!-- ic_my_library_music_24px -->
  722. <svg viewBox="0 408 24 24" class="svg-ic_my_library_music_24px svg-ic_my_library_music_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  723. <use xlink:href="svg/sprite.svg#ic_my_library_music_24px"></use>
  724. </svg>
  725. </div>
  726. <h2>ic_my_library_music_24px</h2>
  727. </li>
  728. <li title="ic_new_releases_24px">
  729. <div class="icon-box">
  730. <!-- ic_new_releases_24px -->
  731. <svg viewBox="0 432 24 24" class="svg-ic_new_releases_24px svg-ic_new_releases_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  732. <use xlink:href="svg/sprite.svg#ic_new_releases_24px"></use>
  733. </svg>
  734. </div>
  735. <h2>ic_new_releases_24px</h2>
  736. </li>
  737. <li title="ic_not_interested_24px">
  738. <div class="icon-box">
  739. <!-- ic_not_interested_24px -->
  740. <svg viewBox="0 456 24 24" class="svg-ic_not_interested_24px svg-ic_not_interested_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  741. <use xlink:href="svg/sprite.svg#ic_not_interested_24px"></use>
  742. </svg>
  743. </div>
  744. <h2>ic_not_interested_24px</h2>
  745. </li>
  746. <li title="ic_pause_24px">
  747. <div class="icon-box">
  748. <!-- ic_pause_24px -->
  749. <svg viewBox="0 480 24 24" class="svg-ic_pause_24px svg-ic_pause_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  750. <use xlink:href="svg/sprite.svg#ic_pause_24px"></use>
  751. </svg>
  752. </div>
  753. <h2>ic_pause_24px</h2>
  754. </li>
  755. <li title="ic_pause_circle_fill_24px">
  756. <div class="icon-box">
  757. <!-- ic_pause_circle_fill_24px -->
  758. <svg viewBox="0 504 24 24" class="svg-ic_pause_circle_fill_24px svg-ic_pause_circle_fill_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  759. <use xlink:href="svg/sprite.svg#ic_pause_circle_fill_24px"></use>
  760. </svg>
  761. </div>
  762. <h2>ic_pause_circle_fill_24px</h2>
  763. </li>
  764. <li title="ic_pause_circle_outline_24px">
  765. <div class="icon-box">
  766. <!-- ic_pause_circle_outline_24px -->
  767. <svg viewBox="0 528 24 24" class="svg-ic_pause_circle_outline_24px svg-ic_pause_circle_outline_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  768. <use xlink:href="svg/sprite.svg#ic_pause_circle_outline_24px"></use>
  769. </svg>
  770. </div>
  771. <h2>ic_pause_circle_outline_24px</h2>
  772. </li>
  773. <li title="ic_play_arrow_24px">
  774. <div class="icon-box">
  775. <!-- ic_play_arrow_24px -->
  776. <svg viewBox="0 552 24 24" class="svg-ic_play_arrow_24px svg-ic_play_arrow_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  777. <use xlink:href="svg/sprite.svg#ic_play_arrow_24px"></use>
  778. </svg>
  779. </div>
  780. <h2>ic_play_arrow_24px</h2>
  781. </li>
  782. <li title="ic_play_circle_fill_24px">
  783. <div class="icon-box">
  784. <!-- ic_play_circle_fill_24px -->
  785. <svg viewBox="0 576 24 24" class="svg-ic_play_circle_fill_24px svg-ic_play_circle_fill_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  786. <use xlink:href="svg/sprite.svg#ic_play_circle_fill_24px"></use>
  787. </svg>
  788. </div>
  789. <h2>ic_play_circle_fill_24px</h2>
  790. </li>
  791. <li title="ic_play_circle_outline_24px">
  792. <div class="icon-box">
  793. <!-- ic_play_circle_outline_24px -->
  794. <svg viewBox="0 600 24 24" class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  795. <use xlink:href="svg/sprite.svg#ic_play_circle_outline_24px"></use>
  796. </svg>
  797. </div>
  798. <h2>ic_play_circle_outline_24px</h2>
  799. </li>
  800. <li title="ic_play_shopping_bag_24px">
  801. <div class="icon-box">
  802. <!-- ic_play_shopping_bag_24px -->
  803. <svg viewBox="0 624 24 24" class="svg-ic_play_shopping_bag_24px svg-ic_play_shopping_bag_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  804. <use xlink:href="svg/sprite.svg#ic_play_shopping_bag_24px"></use>
  805. </svg>
  806. </div>
  807. <h2>ic_play_shopping_bag_24px</h2>
  808. </li>
  809. <li title="ic_playlist_add_24px">
  810. <div class="icon-box">
  811. <!-- ic_playlist_add_24px -->
  812. <svg viewBox="0 648 24 24" class="svg-ic_playlist_add_24px svg-ic_playlist_add_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  813. <use xlink:href="svg/sprite.svg#ic_playlist_add_24px"></use>
  814. </svg>
  815. </div>
  816. <h2>ic_playlist_add_24px</h2>
  817. </li>
  818. <li title="ic_queue_24px">
  819. <div class="icon-box">
  820. <!-- ic_queue_24px -->
  821. <svg viewBox="0 672 24 24" class="svg-ic_queue_24px svg-ic_queue_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  822. <use xlink:href="svg/sprite.svg#ic_queue_24px"></use>
  823. </svg>
  824. </div>
  825. <h2>ic_queue_24px</h2>
  826. </li>
  827. <li title="ic_queue_music_24px">
  828. <div class="icon-box">
  829. <!-- ic_queue_music_24px -->
  830. <svg viewBox="0 696 24 24" class="svg-ic_queue_music_24px svg-ic_queue_music_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  831. <use xlink:href="svg/sprite.svg#ic_queue_music_24px"></use>
  832. </svg>
  833. </div>
  834. <h2>ic_queue_music_24px</h2>
  835. </li>
  836. <li title="ic_radio_24px">
  837. <div class="icon-box">
  838. <!-- ic_radio_24px -->
  839. <svg viewBox="0 720 24 24" class="svg-ic_radio_24px svg-ic_radio_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  840. <use xlink:href="svg/sprite.svg#ic_radio_24px"></use>
  841. </svg>
  842. </div>
  843. <h2>ic_radio_24px</h2>
  844. </li>
  845. <li title="ic_recent_actors_24px">
  846. <div class="icon-box">
  847. <!-- ic_recent_actors_24px -->
  848. <svg viewBox="0 744 24 24" class="svg-ic_recent_actors_24px svg-ic_recent_actors_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  849. <use xlink:href="svg/sprite.svg#ic_recent_actors_24px"></use>
  850. </svg>
  851. </div>
  852. <h2>ic_recent_actors_24px</h2>
  853. </li>
  854. <li title="ic_repeat_24px">
  855. <div class="icon-box">
  856. <!-- ic_repeat_24px -->
  857. <svg viewBox="0 768 24 24" class="svg-ic_repeat_24px svg-ic_repeat_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  858. <use xlink:href="svg/sprite.svg#ic_repeat_24px"></use>
  859. </svg>
  860. </div>
  861. <h2>ic_repeat_24px</h2>
  862. </li>
  863. <li title="ic_repeat_one_24px">
  864. <div class="icon-box">
  865. <!-- ic_repeat_one_24px -->
  866. <svg viewBox="0 792 24 24" class="svg-ic_repeat_one_24px svg-ic_repeat_one_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  867. <use xlink:href="svg/sprite.svg#ic_repeat_one_24px"></use>
  868. </svg>
  869. </div>
  870. <h2>ic_repeat_one_24px</h2>
  871. </li>
  872. <li title="ic_replay_24px">
  873. <div class="icon-box">
  874. <!-- ic_replay_24px -->
  875. <svg viewBox="0 816 24 24" class="svg-ic_replay_24px svg-ic_replay_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  876. <use xlink:href="svg/sprite.svg#ic_replay_24px"></use>
  877. </svg>
  878. </div>
  879. <h2>ic_replay_24px</h2>
  880. </li>
  881. <li title="ic_shuffle_24px">
  882. <div class="icon-box">
  883. <!-- ic_shuffle_24px -->
  884. <svg viewBox="0 840 24 24" class="svg-ic_shuffle_24px svg-ic_shuffle_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  885. <use xlink:href="svg/sprite.svg#ic_shuffle_24px"></use>
  886. </svg>
  887. </div>
  888. <h2>ic_shuffle_24px</h2>
  889. </li>
  890. <li title="ic_skip_next_24px">
  891. <div class="icon-box">
  892. <!-- ic_skip_next_24px -->
  893. <svg viewBox="0 864 24 24" class="svg-ic_skip_next_24px svg-ic_skip_next_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  894. <use xlink:href="svg/sprite.svg#ic_skip_next_24px"></use>
  895. </svg>
  896. </div>
  897. <h2>ic_skip_next_24px</h2>
  898. </li>
  899. <li title="ic_skip_previous_24px">
  900. <div class="icon-box">
  901. <!-- ic_skip_previous_24px -->
  902. <svg viewBox="0 888 24 24" class="svg-ic_skip_previous_24px svg-ic_skip_previous_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  903. <use xlink:href="svg/sprite.svg#ic_skip_previous_24px"></use>
  904. </svg>
  905. </div>
  906. <h2>ic_skip_previous_24px</h2>
  907. </li>
  908. <li title="ic_snooze_24px">
  909. <div class="icon-box">
  910. <!-- ic_snooze_24px -->
  911. <svg viewBox="0 912 24 24" class="svg-ic_snooze_24px svg-ic_snooze_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  912. <use xlink:href="svg/sprite.svg#ic_snooze_24px"></use>
  913. </svg>
  914. </div>
  915. <h2>ic_snooze_24px</h2>
  916. </li>
  917. <li title="ic_stop_24px">
  918. <div class="icon-box">
  919. <!-- ic_stop_24px -->
  920. <svg viewBox="0 936 24 24" class="svg-ic_stop_24px svg-ic_stop_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  921. <use xlink:href="svg/sprite.svg#ic_stop_24px"></use>
  922. </svg>
  923. </div>
  924. <h2>ic_stop_24px</h2>
  925. </li>
  926. <li title="ic_subtitles_24px">
  927. <div class="icon-box">
  928. <!-- ic_subtitles_24px -->
  929. <svg viewBox="0 960 24 24" class="svg-ic_subtitles_24px svg-ic_subtitles_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  930. <use xlink:href="svg/sprite.svg#ic_subtitles_24px"></use>
  931. </svg>
  932. </div>
  933. <h2>ic_subtitles_24px</h2>
  934. </li>
  935. <li title="ic_surround_sound_24px">
  936. <div class="icon-box">
  937. <!-- ic_surround_sound_24px -->
  938. <svg viewBox="0 984 24 24" class="svg-ic_surround_sound_24px svg-ic_surround_sound_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  939. <use xlink:href="svg/sprite.svg#ic_surround_sound_24px"></use>
  940. </svg>
  941. </div>
  942. <h2>ic_surround_sound_24px</h2>
  943. </li>
  944. <li title="ic_video_collection_24px">
  945. <div class="icon-box">
  946. <!-- ic_video_collection_24px -->
  947. <svg viewBox="0 1008 24 24" class="svg-ic_video_collection_24px svg-ic_video_collection_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  948. <use xlink:href="svg/sprite.svg#ic_video_collection_24px"></use>
  949. </svg>
  950. </div>
  951. <h2>ic_video_collection_24px</h2>
  952. </li>
  953. <li title="ic_videocam_24px">
  954. <div class="icon-box">
  955. <!-- ic_videocam_24px -->
  956. <svg viewBox="0 1032 24 24" class="svg-ic_videocam_24px svg-ic_videocam_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  957. <use xlink:href="svg/sprite.svg#ic_videocam_24px"></use>
  958. </svg>
  959. </div>
  960. <h2>ic_videocam_24px</h2>
  961. </li>
  962. <li title="ic_videocam_off_24px">
  963. <div class="icon-box">
  964. <!-- ic_videocam_off_24px -->
  965. <svg viewBox="0 1056 24 24" class="svg-ic_videocam_off_24px svg-ic_videocam_off_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  966. <use xlink:href="svg/sprite.svg#ic_videocam_off_24px"></use>
  967. </svg>
  968. </div>
  969. <h2>ic_videocam_off_24px</h2>
  970. </li>
  971. <li title="ic_volume_down_24px">
  972. <div class="icon-box">
  973. <!-- ic_volume_down_24px -->
  974. <svg viewBox="0 1080 24 24" class="svg-ic_volume_down_24px svg-ic_volume_down_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  975. <use xlink:href="svg/sprite.svg#ic_volume_down_24px"></use>
  976. </svg>
  977. </div>
  978. <h2>ic_volume_down_24px</h2>
  979. </li>
  980. <li title="ic_volume_mute_24px">
  981. <div class="icon-box">
  982. <!-- ic_volume_mute_24px -->
  983. <svg viewBox="0 1104 24 24" class="svg-ic_volume_mute_24px svg-ic_volume_mute_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  984. <use xlink:href="svg/sprite.svg#ic_volume_mute_24px"></use>
  985. </svg>
  986. </div>
  987. <h2>ic_volume_mute_24px</h2>
  988. </li>
  989. <li title="ic_volume_off_24px">
  990. <div class="icon-box">
  991. <!-- ic_volume_off_24px -->
  992. <svg viewBox="0 1128 24 24" class="svg-ic_volume_off_24px svg-ic_volume_off_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  993. <use xlink:href="svg/sprite.svg#ic_volume_off_24px"></use>
  994. </svg>
  995. </div>
  996. <h2>ic_volume_off_24px</h2>
  997. </li>
  998. <li title="ic_volume_up_24px">
  999. <div class="icon-box">
  1000. <!-- ic_volume_up_24px -->
  1001. <svg viewBox="0 1152 24 24" class="svg-ic_volume_up_24px svg-ic_volume_up_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  1002. <use xlink:href="svg/sprite.svg#ic_volume_up_24px"></use>
  1003. </svg>
  1004. </div>
  1005. <h2>ic_volume_up_24px</h2>
  1006. </li>
  1007. <li title="ic_web_24px">
  1008. <div class="icon-box">
  1009. <!-- ic_web_24px -->
  1010. <svg viewBox="0 1176 24 24" class="svg-ic_web_24px svg-ic_web_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  1011. <use xlink:href="svg/sprite.svg#ic_web_24px"></use>
  1012. </svg>
  1013. </div>
  1014. <h2>ic_web_24px</h2>
  1015. </li>
  1016. </ul>
  1017. <!--
  1018. ====================================================================================================
  1019. -->
  1020. </section>
  1021. <footer>
  1022. <p>Generated at Wed, 12 Nov 2014 20:00:29 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p>
  1023. </footer>
  1024. </body>
  1025. </html>