| <!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"/> |
| <script src="https://rawgit.com/jonathantneal/svg4everybody/master/dist/svg4everybody.js"></script> |
| <script>svg4everybody();</script> |
| <title>SVG <symbol> 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> |
| |
| <!-- |
| |
| Sprite shape dimensions |
| ==================================================================================================== |
| You will need to set the sprite shape dimensions via CSS when you use them as inline SVG, otherwise |
| they would become a huge 100% in size. You may use the following dimension classes for doing so. |
| They might well be outsourced to an external stylesheet of course. |
| |
| --> |
| |
| <style type="text/css"> |
| .svg-ic_add_to_queue_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_airplay_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_album_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_art_track_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_av_timer_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_closed_caption_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_equalizer_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_explicit_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_fast_forward_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_fast_rewind_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_fiber_dvr_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_fiber_manual_record_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_fiber_new_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_fiber_pin_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_fiber_smart_record_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_forward_10_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_forward_30_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_forward_5_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_games_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_hd_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_hearing_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_high_quality_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_library_add_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_library_books_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_library_music_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_loop_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_mic_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_mic_none_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_mic_off_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_movie_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_music_video_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_new_releases_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_not_interested_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_pause_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_pause_circle_filled_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_pause_circle_outline_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_play_arrow_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_play_circle_filled_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_playlist_add_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_playlist_add_check_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_playlist_play_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_queue_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_queue_music_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_queue_play_next_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_radio_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_recent_actors_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_remove_from_queue_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_repeat_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_repeat_one_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_replay_10_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_replay_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_replay_30_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_replay_5_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_shuffle_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_skip_next_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_skip_previous_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_slow_motion_video_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_snooze_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_sort_by_alpha_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_stop_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_subscriptions_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_subtitles_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_surround_sound_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_video_library_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_videocam_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_videocam_off_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_volume_down_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_volume_mute_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_volume_off_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_volume_up_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_web_24px-dims { width: 24px; height: 24px; } |
| .svg-ic_web_asset_24px-dims { width: 24px; height: 24px; } |
| </style> |
| <!-- |
| ==================================================================================================== |
| --> |
| |
| </head> |
| <body> |
| |
| <!-- |
| |
| Inline <symbol> SVG sprite |
| ==================================================================================================== |
| This is an inlined version of the generated SVG sprite. The single images may be <use>d everywhere |
| below within this document. Please see https://github.com/jkphl/svg-sprite#inline-embedding for |
| further details on how to create this embeddable sprite variant. |
| |
| --> |
| |
| <svg width="0" height="0" style="position:absolute"> |
| <symbol viewBox="0 0 24 24" id="ic_add_to_queue_24px"><path d="M21 3H3c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5a2 2 0 0 0-2-2zm0 14H3V5h18v12zm-5-7v2h-3v3h-2v-3H8v-2h3V7h2v3h3z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_airplay_24px"><path d="M6 22h12l-6-6zM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_album_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_art_track_24px"><path fill="#010101" d="M22 13h-8v-2h8v2zm0-6h-8v2h8V7zm-8 10h8v-2h-8v2zm-2-8v6c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V9c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2zm-1.5 6l-2.25-3-1.75 2.26-1.25-1.51L3.5 15h7z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_av_timer_24px"><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 9a9 9 0 0 0 0-18h-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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_closed_caption_24px"><path d="M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_equalizer_24px"><path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_explicit_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_fast_forward_24px"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_fast_rewind_24px"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_fiber_dvr_24px"><path d="M17.5 10.5h2v1h-2zm-13 0h2v3h-2zM21 3H3c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V5c0-1.11-.89-2-2-2zM8 13.5c0 .85-.65 1.5-1.5 1.5H3V9h3.5c.85 0 1.5.65 1.5 1.5v3zm4.62 1.5h-1.5L9.37 9h1.5l1 3.43 1-3.43h1.5l-1.75 6zM21 11.5c0 .6-.4 1.15-.9 1.4L21 15h-1.5l-.85-2H17.5v2H16V9h3.5c.85 0 1.5.65 1.5 1.5v1z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_fiber_manual_record_24px"><circle fill="#010101" cx="12" cy="12" r="8"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_fiber_new_24px"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zM8.5 15H7.3l-2.55-3.5V15H3.5V9h1.25l2.5 3.5V9H8.5v6zm5-4.74H11v1.12h2.5v1.26H11v1.11h2.5V15h-4V9h4v1.26zm7 3.74c0 .55-.45 1-1 1h-4c-.55 0-1-.45-1-1V9h1.25v4.51h1.13V9.99h1.25v3.51h1.12V9h1.25v5z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_fiber_pin_24px"><path d="M5.5 10.5h2v1h-2zM20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zM9 11.5c0 .85-.65 1.5-1.5 1.5h-2v2H4V9h3.5c.85 0 1.5.65 1.5 1.5v1zm3.5 3.5H11V9h1.5v6zm7.5 0h-1.2l-2.55-3.5V15H15V9h1.25l2.5 3.5V9H20v6z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_fiber_smart_record_24px"><g fill="#010101"><circle cx="9" cy="12" r="8"/><path d="M17 4.26v2.09a5.99 5.99 0 0 1 0 11.3v2.09c3.45-.89 6-4.01 6-7.74s-2.55-6.85-6-7.74z"/></g></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_forward_10_24px"><path d="M4 13c0 4.4 3.6 8 8 8s8-3.6 8-8h-2c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6v4l5-5-5-5v4c-4.4 0-8 3.6-8 8zm6.8 3H10v-3.3L9 13v-.7l1.8-.6h.1V16zm4.3-1.8c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.8-.8v-.5s-.1-.2-.1-.3-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_forward_30_24px"><path d="M9.6 13.5h.4c.2 0 .4-.1.5-.2s.2-.2.2-.4v-.2s-.1-.1-.1-.2-.1-.1-.2-.1h-.5s-.1.1-.2.1-.1.1-.1.2v.2h-1c0-.2 0-.3.1-.5s.2-.3.3-.4.3-.2.4-.2.4-.1.5-.1c.2 0 .4 0 .6.1s.3.1.5.2.2.2.3.4.1.3.1.5v.3s-.1.2-.1.3-.1.2-.2.2-.2.1-.3.2c.2.1.4.2.5.4s.2.4.2.6c0 .2 0 .4-.1.5s-.2.3-.3.4-.3.2-.5.2-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.4-.1-.6h.8v.2s.1.1.1.2.1.1.2.1h.5s.1-.1.2-.1.1-.1.1-.2v-.5s-.1-.1-.1-.2-.1-.1-.2-.1h-.6v-.7zm5.7.7c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.9-.8v-.5s-.1-.2-.1-.3-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5zM4 13c0 4.4 3.6 8 8 8s8-3.6 8-8h-2c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6v4l5-5-5-5v4c-4.4 0-8 3.6-8 8z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_forward_5_24px"><path d="M4 13c0 4.4 3.6 8 8 8s8-3.6 8-8h-2c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6v4l5-5-5-5v4c-4.4 0-8 3.6-8 8zm6.7.9l.2-2.2h2.4v.7h-1.7l-.1.9s.1 0 .1-.1.1 0 .1-.1.1 0 .2 0h.2c.2 0 .4 0 .5.1s.3.2.4.3.2.3.3.5.1.4.1.6c0 .2 0 .4-.1.5s-.1.3-.3.5-.3.2-.5.3-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.3-.1-.5h.8c0 .2.1.3.2.4s.2.1.4.1c.1 0 .2 0 .3-.1l.2-.2s.1-.2.1-.3v-.6l-.1-.2-.2-.2s-.2-.1-.3-.1h-.2s-.1 0-.2.1-.1 0-.1.1-.1.1-.1.1h-.6z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_games_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_hd_24px"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_hearing_24px"><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.55A4 4 0 0 0 21 18h-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 9a2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0-5 0z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_high_quality_24px"><path d="M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_library_add_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_library_books_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_library_music_24px"><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.5a2.5 2.5 0 0 1-5 0 2.5 2.5 0 0 1 2.5-2.5c.57 0 1.08.19 1.5.51V5h4v2zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_loop_24px"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 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.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_mic_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_mic_none_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_mic_off_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_movie_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_music_video_24px"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03A3.003 3.003 0 0 1 11 18c-1.66 0-3-1.34-3-3z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_new_releases_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_not_interested_24px"><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.31A7.902 7.902 0 0 1 12 20zm6.31-3.1L7.1 5.69A7.902 7.902 0 0 1 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_pause_24px"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_pause_circle_filled_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_pause_circle_outline_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_play_arrow_24px"><path d="M8 5v14l11-7z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_play_circle_filled_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_play_circle_outline_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_playlist_add_24px"><path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_playlist_add_check_24px"><path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zM2 16h8v-2H2v2zm19.5-4.5L23 13l-6.99 7-4.51-4.5L13 14l3.01 3 5.49-5.5z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_playlist_play_24px"><path d="M19 9H2v2h17V9zm0-4H2v2h17V5zM2 15h13v-2H2v2zm15-2v6l5-3-5-3z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_queue_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_queue_music_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_queue_play_next_24px"><path d="M21 3H3c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h5v2h8v-2h2v-2H3V5h18v8h2V5a2 2 0 0 0-2-2zm-8 7V7h-2v3H8v2h3v3h2v-3h3v-2h-3zm11 8l-4.5 4.5L18 21l3-3-3-3 1.5-1.5L24 18z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_radio_24px"><path d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12a2 2 0 0 0 2 2h16a2 2 0 0 0 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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_recent_actors_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_remove_from_queue_24px"><path d="M21 3H3c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5a2 2 0 0 0-2-2zm0 14H3V5h18v12zm-5-7v2H8v-2h8z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_repeat_24px"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_repeat_one_24px"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_replay_10_24px"><path d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8zm-1.1 11H10v-3.3L9 13v-.7l1.8-.6h.1V16zm4.3-1.8c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1c.2.1.3.2.5.3s.2.3.3.6.1.5.1.8v.7zm-.9-.8v-.5s-.1-.2-.1-.3-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_replay_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_replay_30_24px"><path d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8zm-2.4 8.5h.4c.2 0 .4-.1.5-.2s.2-.2.2-.4v-.2s-.1-.1-.1-.2-.1-.1-.2-.1h-.5s-.1.1-.2.1-.1.1-.1.2v.2h-1c0-.2 0-.3.1-.5s.2-.3.3-.4.3-.2.4-.2.4-.1.5-.1c.2 0 .4 0 .6.1s.3.1.5.2.2.2.3.4.1.3.1.5v.3s-.1.2-.1.3-.1.2-.2.2-.2.1-.3.2c.2.1.4.2.5.4s.2.4.2.6c0 .2 0 .4-.1.5s-.2.3-.3.4-.3.2-.5.2-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.4-.1-.6h.8v.2s.1.1.1.2.1.1.2.1h.5s.1-.1.2-.1.1-.1.1-.2v-.5s-.1-.1-.1-.2-.1-.1-.2-.1h-.6v-.7zm5.7.7c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.8-.8v-.5c0-.1-.1-.2-.1-.3s-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_replay_5_24px"><path d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8zm-1.3 8.9l.2-2.2h2.4v.7h-1.7l-.1.9s.1 0 .1-.1.1 0 .1-.1.1 0 .2 0h.2c.2 0 .4 0 .5.1s.3.2.4.3.2.3.3.5.1.4.1.6c0 .2 0 .4-.1.5s-.1.3-.3.5-.3.2-.4.3-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.3-.1-.5h.8c0 .2.1.3.2.4s.2.1.4.1c.1 0 .2 0 .3-.1l.2-.2s.1-.2.1-.3v-.6l-.1-.2-.2-.2s-.2-.1-.3-.1h-.2s-.1 0-.2.1-.1 0-.1.1-.1.1-.1.1h-.7z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_shuffle_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_skip_next_24px"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_skip_previous_24px"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_slow_motion_video_24px"><path d="M13.05 9.79L10 7.5v9l3.05-2.29L16 12zm0 0L10 7.5v9l3.05-2.29L16 12zm0 0L10 7.5v9l3.05-2.29L16 12zM11 4.07V2.05c-2.01.2-3.84 1-5.32 2.21L7.1 5.69A7.94 7.94 0 0 1 11 4.07zM5.69 7.1L4.26 5.68A9.95 9.95 0 0 0 2.05 11h2.02a7.94 7.94 0 0 1 1.62-3.9zM4.07 13H2.05c.2 2.01 1 3.84 2.21 5.32l1.43-1.43A7.868 7.868 0 0 1 4.07 13zm1.61 6.74A9.98 9.98 0 0 0 11 21.95v-2.02a7.94 7.94 0 0 1-3.9-1.62l-1.42 1.43zM22 12c0 5.16-3.92 9.42-8.95 9.95v-2.02C16.97 19.41 20 16.05 20 12s-3.03-7.41-6.95-7.93V2.05C18.08 2.58 22 6.84 22 12z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_snooze_24px"><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 9a9 9 0 0 0 0-18zm0 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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_sort_by_alpha_24px"><path d="M14.94 4.66h-4.72l2.36-2.36zm-4.69 14.71h4.66l-2.33 2.33zM6.1 6.27L1.6 17.73h1.84l.92-2.45h5.11l.92 2.45h1.84L7.74 6.27H6.1zm-1.13 7.37l1.94-5.18 1.94 5.18H4.97zm10.76 2.5h6.12v1.59h-8.53v-1.29l5.92-8.56h-5.88v-1.6h8.3v1.26l-5.93 8.6z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_stop_24px"><path d="M6 6h12v12H6z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_subscriptions_24px"><path d="M20 8H4V6h16v2zm-2-6H6v2h12V2zm4 10v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-8c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2zm-6 4l-6-3.27v6.53L16 16z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_subtitles_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_surround_sound_24px"><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.41A7.91 7.91 0 0 1 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.41A7.91 7.91 0 0 1 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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_video_library_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_videocam_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_videocam_off_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_volume_down_24px"><path d="M18.5 12A4.5 4.5 0 0 0 16 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_volume_mute_24px"><path d="M7 9v6h4l5 5V4l-5 5H7z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_volume_off_24px"><path d="M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 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.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_volume_up_24px"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_web_24px"><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"/></symbol> |
| <symbol viewBox="0 0 24 24" id="ic_web_asset_24px"><path fill="#010101" d="M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6a2 2 0 0 0-2-2zm0 14H5V8h14v10z"/></symbol> |
| </svg> |
| |
| <!-- |
| ==================================================================================================== |
| --> |
| |
| <header> |
| <h1>SVG <code><symbol></code> sprite preview</h1> |
| <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> |
| <ul> |
| <li>Your browser has to <a href="http://caniuse.com/#feat=svg-html5" target="_blank">support inline SVG</a> for these techniques to work.</li> |
| <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> |
| <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> |
| </ul> |
| </header> |
| <section> |
| |
| <!-- |
| |
| A) Inline SVG with embedded sprite |
| ==================================================================================================== |
| These SVG images make use of fragment identifiers (IDs) and are extracted out of the inline sprite |
| embedded above. They may be styled via CSS. |
| |
| --> |
| |
| <h3>A) Inline SVG with embedded sprite</h3> |
| <ul> |
| |
| <li title="ic_add_to_queue_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_add_to_queue_24px --> |
| <svg class="svg-ic_add_to_queue_24px-dims"> |
| <use xlink:href="#ic_add_to_queue_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_add_to_queue_24px</h2> |
| </li> |
| <li title="ic_airplay_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_airplay_24px --> |
| <svg class="svg-ic_airplay_24px-dims"> |
| <use xlink:href="#ic_airplay_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_airplay_24px</h2> |
| </li> |
| <li title="ic_album_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_album_24px --> |
| <svg class="svg-ic_album_24px-dims"> |
| <use xlink:href="#ic_album_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_album_24px</h2> |
| </li> |
| <li title="ic_art_track_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_art_track_24px --> |
| <svg class="svg-ic_art_track_24px-dims"> |
| <use xlink:href="#ic_art_track_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_art_track_24px</h2> |
| </li> |
| <li title="ic_av_timer_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_av_timer_24px --> |
| <svg class="svg-ic_av_timer_24px-dims"> |
| <use xlink:href="#ic_av_timer_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_av_timer_24px</h2> |
| </li> |
| <li title="ic_closed_caption_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_closed_caption_24px --> |
| <svg class="svg-ic_closed_caption_24px-dims"> |
| <use xlink:href="#ic_closed_caption_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_closed_caption_24px</h2> |
| </li> |
| <li title="ic_equalizer_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_equalizer_24px --> |
| <svg class="svg-ic_equalizer_24px-dims"> |
| <use xlink:href="#ic_equalizer_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_equalizer_24px</h2> |
| </li> |
| <li title="ic_explicit_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_explicit_24px --> |
| <svg class="svg-ic_explicit_24px-dims"> |
| <use xlink:href="#ic_explicit_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_explicit_24px</h2> |
| </li> |
| <li title="ic_fast_forward_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fast_forward_24px --> |
| <svg class="svg-ic_fast_forward_24px-dims"> |
| <use xlink:href="#ic_fast_forward_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fast_forward_24px</h2> |
| </li> |
| <li title="ic_fast_rewind_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fast_rewind_24px --> |
| <svg class="svg-ic_fast_rewind_24px-dims"> |
| <use xlink:href="#ic_fast_rewind_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fast_rewind_24px</h2> |
| </li> |
| <li title="ic_fiber_dvr_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fiber_dvr_24px --> |
| <svg class="svg-ic_fiber_dvr_24px-dims"> |
| <use xlink:href="#ic_fiber_dvr_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fiber_dvr_24px</h2> |
| </li> |
| <li title="ic_fiber_manual_record_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fiber_manual_record_24px --> |
| <svg class="svg-ic_fiber_manual_record_24px-dims"> |
| <use xlink:href="#ic_fiber_manual_record_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fiber_manual_record_24px</h2> |
| </li> |
| <li title="ic_fiber_new_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fiber_new_24px --> |
| <svg class="svg-ic_fiber_new_24px-dims"> |
| <use xlink:href="#ic_fiber_new_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fiber_new_24px</h2> |
| </li> |
| <li title="ic_fiber_pin_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fiber_pin_24px --> |
| <svg class="svg-ic_fiber_pin_24px-dims"> |
| <use xlink:href="#ic_fiber_pin_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fiber_pin_24px</h2> |
| </li> |
| <li title="ic_fiber_smart_record_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fiber_smart_record_24px --> |
| <svg class="svg-ic_fiber_smart_record_24px-dims"> |
| <use xlink:href="#ic_fiber_smart_record_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fiber_smart_record_24px</h2> |
| </li> |
| <li title="ic_forward_10_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_forward_10_24px --> |
| <svg class="svg-ic_forward_10_24px-dims"> |
| <use xlink:href="#ic_forward_10_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_forward_10_24px</h2> |
| </li> |
| <li title="ic_forward_30_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_forward_30_24px --> |
| <svg class="svg-ic_forward_30_24px-dims"> |
| <use xlink:href="#ic_forward_30_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_forward_30_24px</h2> |
| </li> |
| <li title="ic_forward_5_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_forward_5_24px --> |
| <svg class="svg-ic_forward_5_24px-dims"> |
| <use xlink:href="#ic_forward_5_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_forward_5_24px</h2> |
| </li> |
| <li title="ic_games_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_games_24px --> |
| <svg class="svg-ic_games_24px-dims"> |
| <use xlink:href="#ic_games_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_games_24px</h2> |
| </li> |
| <li title="ic_hd_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_hd_24px --> |
| <svg class="svg-ic_hd_24px-dims"> |
| <use xlink:href="#ic_hd_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_hd_24px</h2> |
| </li> |
| <li title="ic_hearing_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_hearing_24px --> |
| <svg class="svg-ic_hearing_24px-dims"> |
| <use xlink:href="#ic_hearing_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_hearing_24px</h2> |
| </li> |
| <li title="ic_high_quality_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_high_quality_24px --> |
| <svg class="svg-ic_high_quality_24px-dims"> |
| <use xlink:href="#ic_high_quality_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_high_quality_24px</h2> |
| </li> |
| <li title="ic_library_add_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_library_add_24px --> |
| <svg class="svg-ic_library_add_24px-dims"> |
| <use xlink:href="#ic_library_add_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_library_add_24px</h2> |
| </li> |
| <li title="ic_library_books_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_library_books_24px --> |
| <svg class="svg-ic_library_books_24px-dims"> |
| <use xlink:href="#ic_library_books_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_library_books_24px</h2> |
| </li> |
| <li title="ic_library_music_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_library_music_24px --> |
| <svg class="svg-ic_library_music_24px-dims"> |
| <use xlink:href="#ic_library_music_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_library_music_24px</h2> |
| </li> |
| <li title="ic_loop_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_loop_24px --> |
| <svg class="svg-ic_loop_24px-dims"> |
| <use xlink:href="#ic_loop_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_loop_24px</h2> |
| </li> |
| <li title="ic_mic_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_mic_24px --> |
| <svg class="svg-ic_mic_24px-dims"> |
| <use xlink:href="#ic_mic_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_mic_24px</h2> |
| </li> |
| <li title="ic_mic_none_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_mic_none_24px --> |
| <svg class="svg-ic_mic_none_24px-dims"> |
| <use xlink:href="#ic_mic_none_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_mic_none_24px</h2> |
| </li> |
| <li title="ic_mic_off_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_mic_off_24px --> |
| <svg class="svg-ic_mic_off_24px-dims"> |
| <use xlink:href="#ic_mic_off_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_mic_off_24px</h2> |
| </li> |
| <li title="ic_movie_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_movie_24px --> |
| <svg class="svg-ic_movie_24px-dims"> |
| <use xlink:href="#ic_movie_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_movie_24px</h2> |
| </li> |
| <li title="ic_music_video_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_music_video_24px --> |
| <svg class="svg-ic_music_video_24px-dims"> |
| <use xlink:href="#ic_music_video_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_music_video_24px</h2> |
| </li> |
| <li title="ic_new_releases_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_new_releases_24px --> |
| <svg class="svg-ic_new_releases_24px-dims"> |
| <use xlink:href="#ic_new_releases_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_new_releases_24px</h2> |
| </li> |
| <li title="ic_not_interested_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_not_interested_24px --> |
| <svg class="svg-ic_not_interested_24px-dims"> |
| <use xlink:href="#ic_not_interested_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_not_interested_24px</h2> |
| </li> |
| <li title="ic_pause_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_pause_24px --> |
| <svg class="svg-ic_pause_24px-dims"> |
| <use xlink:href="#ic_pause_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_pause_24px</h2> |
| </li> |
| <li title="ic_pause_circle_filled_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_pause_circle_filled_24px --> |
| <svg class="svg-ic_pause_circle_filled_24px-dims"> |
| <use xlink:href="#ic_pause_circle_filled_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_pause_circle_filled_24px</h2> |
| </li> |
| <li title="ic_pause_circle_outline_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_pause_circle_outline_24px --> |
| <svg class="svg-ic_pause_circle_outline_24px-dims"> |
| <use xlink:href="#ic_pause_circle_outline_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_pause_circle_outline_24px</h2> |
| </li> |
| <li title="ic_play_arrow_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_play_arrow_24px --> |
| <svg class="svg-ic_play_arrow_24px-dims"> |
| <use xlink:href="#ic_play_arrow_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_play_arrow_24px</h2> |
| </li> |
| <li title="ic_play_circle_filled_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_play_circle_filled_24px --> |
| <svg class="svg-ic_play_circle_filled_24px-dims"> |
| <use xlink:href="#ic_play_circle_filled_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_play_circle_filled_24px</h2> |
| </li> |
| <li title="ic_play_circle_outline_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_play_circle_outline_24px --> |
| <svg class="svg-ic_play_circle_outline_24px-dims"> |
| <use xlink:href="#ic_play_circle_outline_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_play_circle_outline_24px</h2> |
| </li> |
| <li title="ic_playlist_add_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_playlist_add_24px --> |
| <svg class="svg-ic_playlist_add_24px-dims"> |
| <use xlink:href="#ic_playlist_add_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_playlist_add_24px</h2> |
| </li> |
| <li title="ic_playlist_add_check_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_playlist_add_check_24px --> |
| <svg class="svg-ic_playlist_add_check_24px-dims"> |
| <use xlink:href="#ic_playlist_add_check_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_playlist_add_check_24px</h2> |
| </li> |
| <li title="ic_playlist_play_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_playlist_play_24px --> |
| <svg class="svg-ic_playlist_play_24px-dims"> |
| <use xlink:href="#ic_playlist_play_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_playlist_play_24px</h2> |
| </li> |
| <li title="ic_queue_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_queue_24px --> |
| <svg class="svg-ic_queue_24px-dims"> |
| <use xlink:href="#ic_queue_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_queue_24px</h2> |
| </li> |
| <li title="ic_queue_music_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_queue_music_24px --> |
| <svg class="svg-ic_queue_music_24px-dims"> |
| <use xlink:href="#ic_queue_music_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_queue_music_24px</h2> |
| </li> |
| <li title="ic_queue_play_next_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_queue_play_next_24px --> |
| <svg class="svg-ic_queue_play_next_24px-dims"> |
| <use xlink:href="#ic_queue_play_next_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_queue_play_next_24px</h2> |
| </li> |
| <li title="ic_radio_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_radio_24px --> |
| <svg class="svg-ic_radio_24px-dims"> |
| <use xlink:href="#ic_radio_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_radio_24px</h2> |
| </li> |
| <li title="ic_recent_actors_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_recent_actors_24px --> |
| <svg class="svg-ic_recent_actors_24px-dims"> |
| <use xlink:href="#ic_recent_actors_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_recent_actors_24px</h2> |
| </li> |
| <li title="ic_remove_from_queue_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_remove_from_queue_24px --> |
| <svg class="svg-ic_remove_from_queue_24px-dims"> |
| <use xlink:href="#ic_remove_from_queue_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_remove_from_queue_24px</h2> |
| </li> |
| <li title="ic_repeat_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_repeat_24px --> |
| <svg class="svg-ic_repeat_24px-dims"> |
| <use xlink:href="#ic_repeat_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_repeat_24px</h2> |
| </li> |
| <li title="ic_repeat_one_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_repeat_one_24px --> |
| <svg class="svg-ic_repeat_one_24px-dims"> |
| <use xlink:href="#ic_repeat_one_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_repeat_one_24px</h2> |
| </li> |
| <li title="ic_replay_10_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_replay_10_24px --> |
| <svg class="svg-ic_replay_10_24px-dims"> |
| <use xlink:href="#ic_replay_10_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_replay_10_24px</h2> |
| </li> |
| <li title="ic_replay_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_replay_24px --> |
| <svg class="svg-ic_replay_24px-dims"> |
| <use xlink:href="#ic_replay_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_replay_24px</h2> |
| </li> |
| <li title="ic_replay_30_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_replay_30_24px --> |
| <svg class="svg-ic_replay_30_24px-dims"> |
| <use xlink:href="#ic_replay_30_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_replay_30_24px</h2> |
| </li> |
| <li title="ic_replay_5_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_replay_5_24px --> |
| <svg class="svg-ic_replay_5_24px-dims"> |
| <use xlink:href="#ic_replay_5_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_replay_5_24px</h2> |
| </li> |
| <li title="ic_shuffle_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_shuffle_24px --> |
| <svg class="svg-ic_shuffle_24px-dims"> |
| <use xlink:href="#ic_shuffle_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_shuffle_24px</h2> |
| </li> |
| <li title="ic_skip_next_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_skip_next_24px --> |
| <svg class="svg-ic_skip_next_24px-dims"> |
| <use xlink:href="#ic_skip_next_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_skip_next_24px</h2> |
| </li> |
| <li title="ic_skip_previous_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_skip_previous_24px --> |
| <svg class="svg-ic_skip_previous_24px-dims"> |
| <use xlink:href="#ic_skip_previous_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_skip_previous_24px</h2> |
| </li> |
| <li title="ic_slow_motion_video_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_slow_motion_video_24px --> |
| <svg class="svg-ic_slow_motion_video_24px-dims"> |
| <use xlink:href="#ic_slow_motion_video_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_slow_motion_video_24px</h2> |
| </li> |
| <li title="ic_snooze_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_snooze_24px --> |
| <svg class="svg-ic_snooze_24px-dims"> |
| <use xlink:href="#ic_snooze_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_snooze_24px</h2> |
| </li> |
| <li title="ic_sort_by_alpha_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_sort_by_alpha_24px --> |
| <svg class="svg-ic_sort_by_alpha_24px-dims"> |
| <use xlink:href="#ic_sort_by_alpha_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_sort_by_alpha_24px</h2> |
| </li> |
| <li title="ic_stop_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_stop_24px --> |
| <svg class="svg-ic_stop_24px-dims"> |
| <use xlink:href="#ic_stop_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_stop_24px</h2> |
| </li> |
| <li title="ic_subscriptions_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_subscriptions_24px --> |
| <svg class="svg-ic_subscriptions_24px-dims"> |
| <use xlink:href="#ic_subscriptions_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_subscriptions_24px</h2> |
| </li> |
| <li title="ic_subtitles_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_subtitles_24px --> |
| <svg class="svg-ic_subtitles_24px-dims"> |
| <use xlink:href="#ic_subtitles_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_subtitles_24px</h2> |
| </li> |
| <li title="ic_surround_sound_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_surround_sound_24px --> |
| <svg class="svg-ic_surround_sound_24px-dims"> |
| <use xlink:href="#ic_surround_sound_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_surround_sound_24px</h2> |
| </li> |
| <li title="ic_video_library_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_video_library_24px --> |
| <svg class="svg-ic_video_library_24px-dims"> |
| <use xlink:href="#ic_video_library_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_video_library_24px</h2> |
| </li> |
| <li title="ic_videocam_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_videocam_24px --> |
| <svg class="svg-ic_videocam_24px-dims"> |
| <use xlink:href="#ic_videocam_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_videocam_24px</h2> |
| </li> |
| <li title="ic_videocam_off_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_videocam_off_24px --> |
| <svg class="svg-ic_videocam_off_24px-dims"> |
| <use xlink:href="#ic_videocam_off_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_videocam_off_24px</h2> |
| </li> |
| <li title="ic_volume_down_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_volume_down_24px --> |
| <svg class="svg-ic_volume_down_24px-dims"> |
| <use xlink:href="#ic_volume_down_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_volume_down_24px</h2> |
| </li> |
| <li title="ic_volume_mute_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_volume_mute_24px --> |
| <svg class="svg-ic_volume_mute_24px-dims"> |
| <use xlink:href="#ic_volume_mute_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_volume_mute_24px</h2> |
| </li> |
| <li title="ic_volume_off_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_volume_off_24px --> |
| <svg class="svg-ic_volume_off_24px-dims"> |
| <use xlink:href="#ic_volume_off_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_volume_off_24px</h2> |
| </li> |
| <li title="ic_volume_up_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_volume_up_24px --> |
| <svg class="svg-ic_volume_up_24px-dims"> |
| <use xlink:href="#ic_volume_up_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_volume_up_24px</h2> |
| </li> |
| <li title="ic_web_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_web_24px --> |
| <svg class="svg-ic_web_24px-dims"> |
| <use xlink:href="#ic_web_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_web_24px</h2> |
| </li> |
| <li title="ic_web_asset_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_web_asset_24px --> |
| <svg class="svg-ic_web_asset_24px-dims"> |
| <use xlink:href="#ic_web_asset_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_web_asset_24px</h2> |
| </li> |
| </ul> |
| |
| <!-- |
| ==================================================================================================== |
| --> |
| |
| </section> |
| <section> |
| |
| <!-- |
| |
| B) Inline SVG with external sprite (IE 9-11 with polyfill only) |
| ==================================================================================================== |
| These SVG images make use of an URL + fragment identifiers (IDs) and refer to the regular external |
| SVG sprite. They may be styled via CSS. (IE 9-11 with polyfill only) |
| |
| --> |
| |
| <h3>B) Inline SVG with external sprite (IE 9-11 with polyfill only)</h3> |
| <ul> |
| |
| <li title="ic_add_to_queue_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_add_to_queue_24px --> |
| <svg class="svg-ic_add_to_queue_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_add_to_queue_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_add_to_queue_24px</h2> |
| </li> |
| <li title="ic_airplay_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_airplay_24px --> |
| <svg class="svg-ic_airplay_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_airplay_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_airplay_24px</h2> |
| </li> |
| <li title="ic_album_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_album_24px --> |
| <svg class="svg-ic_album_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_album_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_album_24px</h2> |
| </li> |
| <li title="ic_art_track_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_art_track_24px --> |
| <svg class="svg-ic_art_track_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_art_track_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_art_track_24px</h2> |
| </li> |
| <li title="ic_av_timer_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_av_timer_24px --> |
| <svg class="svg-ic_av_timer_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_av_timer_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_av_timer_24px</h2> |
| </li> |
| <li title="ic_closed_caption_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_closed_caption_24px --> |
| <svg class="svg-ic_closed_caption_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_closed_caption_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_closed_caption_24px</h2> |
| </li> |
| <li title="ic_equalizer_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_equalizer_24px --> |
| <svg class="svg-ic_equalizer_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_equalizer_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_equalizer_24px</h2> |
| </li> |
| <li title="ic_explicit_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_explicit_24px --> |
| <svg class="svg-ic_explicit_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_explicit_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_explicit_24px</h2> |
| </li> |
| <li title="ic_fast_forward_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fast_forward_24px --> |
| <svg class="svg-ic_fast_forward_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_fast_forward_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fast_forward_24px</h2> |
| </li> |
| <li title="ic_fast_rewind_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fast_rewind_24px --> |
| <svg class="svg-ic_fast_rewind_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_fast_rewind_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fast_rewind_24px</h2> |
| </li> |
| <li title="ic_fiber_dvr_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fiber_dvr_24px --> |
| <svg class="svg-ic_fiber_dvr_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_fiber_dvr_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fiber_dvr_24px</h2> |
| </li> |
| <li title="ic_fiber_manual_record_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fiber_manual_record_24px --> |
| <svg class="svg-ic_fiber_manual_record_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_fiber_manual_record_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fiber_manual_record_24px</h2> |
| </li> |
| <li title="ic_fiber_new_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fiber_new_24px --> |
| <svg class="svg-ic_fiber_new_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_fiber_new_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fiber_new_24px</h2> |
| </li> |
| <li title="ic_fiber_pin_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fiber_pin_24px --> |
| <svg class="svg-ic_fiber_pin_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_fiber_pin_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fiber_pin_24px</h2> |
| </li> |
| <li title="ic_fiber_smart_record_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_fiber_smart_record_24px --> |
| <svg class="svg-ic_fiber_smart_record_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_fiber_smart_record_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_fiber_smart_record_24px</h2> |
| </li> |
| <li title="ic_forward_10_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_forward_10_24px --> |
| <svg class="svg-ic_forward_10_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_forward_10_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_forward_10_24px</h2> |
| </li> |
| <li title="ic_forward_30_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_forward_30_24px --> |
| <svg class="svg-ic_forward_30_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_forward_30_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_forward_30_24px</h2> |
| </li> |
| <li title="ic_forward_5_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_forward_5_24px --> |
| <svg class="svg-ic_forward_5_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_forward_5_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_forward_5_24px</h2> |
| </li> |
| <li title="ic_games_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_games_24px --> |
| <svg class="svg-ic_games_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_games_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_games_24px</h2> |
| </li> |
| <li title="ic_hd_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_hd_24px --> |
| <svg class="svg-ic_hd_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_hd_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_hd_24px</h2> |
| </li> |
| <li title="ic_hearing_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_hearing_24px --> |
| <svg class="svg-ic_hearing_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_hearing_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_hearing_24px</h2> |
| </li> |
| <li title="ic_high_quality_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_high_quality_24px --> |
| <svg class="svg-ic_high_quality_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_high_quality_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_high_quality_24px</h2> |
| </li> |
| <li title="ic_library_add_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_library_add_24px --> |
| <svg class="svg-ic_library_add_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_library_add_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_library_add_24px</h2> |
| </li> |
| <li title="ic_library_books_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_library_books_24px --> |
| <svg class="svg-ic_library_books_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_library_books_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_library_books_24px</h2> |
| </li> |
| <li title="ic_library_music_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_library_music_24px --> |
| <svg class="svg-ic_library_music_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_library_music_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_library_music_24px</h2> |
| </li> |
| <li title="ic_loop_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_loop_24px --> |
| <svg class="svg-ic_loop_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_loop_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_loop_24px</h2> |
| </li> |
| <li title="ic_mic_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_mic_24px --> |
| <svg class="svg-ic_mic_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_mic_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_mic_24px</h2> |
| </li> |
| <li title="ic_mic_none_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_mic_none_24px --> |
| <svg class="svg-ic_mic_none_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_mic_none_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_mic_none_24px</h2> |
| </li> |
| <li title="ic_mic_off_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_mic_off_24px --> |
| <svg class="svg-ic_mic_off_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_mic_off_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_mic_off_24px</h2> |
| </li> |
| <li title="ic_movie_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_movie_24px --> |
| <svg class="svg-ic_movie_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_movie_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_movie_24px</h2> |
| </li> |
| <li title="ic_music_video_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_music_video_24px --> |
| <svg class="svg-ic_music_video_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_music_video_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_music_video_24px</h2> |
| </li> |
| <li title="ic_new_releases_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_new_releases_24px --> |
| <svg class="svg-ic_new_releases_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_new_releases_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_new_releases_24px</h2> |
| </li> |
| <li title="ic_not_interested_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_not_interested_24px --> |
| <svg class="svg-ic_not_interested_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_not_interested_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_not_interested_24px</h2> |
| </li> |
| <li title="ic_pause_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_pause_24px --> |
| <svg class="svg-ic_pause_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_pause_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_pause_24px</h2> |
| </li> |
| <li title="ic_pause_circle_filled_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_pause_circle_filled_24px --> |
| <svg class="svg-ic_pause_circle_filled_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_pause_circle_filled_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_pause_circle_filled_24px</h2> |
| </li> |
| <li title="ic_pause_circle_outline_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_pause_circle_outline_24px --> |
| <svg class="svg-ic_pause_circle_outline_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_pause_circle_outline_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_pause_circle_outline_24px</h2> |
| </li> |
| <li title="ic_play_arrow_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_play_arrow_24px --> |
| <svg class="svg-ic_play_arrow_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_play_arrow_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_play_arrow_24px</h2> |
| </li> |
| <li title="ic_play_circle_filled_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_play_circle_filled_24px --> |
| <svg class="svg-ic_play_circle_filled_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_play_circle_filled_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_play_circle_filled_24px</h2> |
| </li> |
| <li title="ic_play_circle_outline_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_play_circle_outline_24px --> |
| <svg class="svg-ic_play_circle_outline_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_play_circle_outline_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_play_circle_outline_24px</h2> |
| </li> |
| <li title="ic_playlist_add_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_playlist_add_24px --> |
| <svg class="svg-ic_playlist_add_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_playlist_add_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_playlist_add_24px</h2> |
| </li> |
| <li title="ic_playlist_add_check_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_playlist_add_check_24px --> |
| <svg class="svg-ic_playlist_add_check_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_playlist_add_check_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_playlist_add_check_24px</h2> |
| </li> |
| <li title="ic_playlist_play_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_playlist_play_24px --> |
| <svg class="svg-ic_playlist_play_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_playlist_play_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_playlist_play_24px</h2> |
| </li> |
| <li title="ic_queue_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_queue_24px --> |
| <svg class="svg-ic_queue_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_queue_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_queue_24px</h2> |
| </li> |
| <li title="ic_queue_music_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_queue_music_24px --> |
| <svg class="svg-ic_queue_music_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_queue_music_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_queue_music_24px</h2> |
| </li> |
| <li title="ic_queue_play_next_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_queue_play_next_24px --> |
| <svg class="svg-ic_queue_play_next_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_queue_play_next_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_queue_play_next_24px</h2> |
| </li> |
| <li title="ic_radio_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_radio_24px --> |
| <svg class="svg-ic_radio_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_radio_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_radio_24px</h2> |
| </li> |
| <li title="ic_recent_actors_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_recent_actors_24px --> |
| <svg class="svg-ic_recent_actors_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_recent_actors_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_recent_actors_24px</h2> |
| </li> |
| <li title="ic_remove_from_queue_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_remove_from_queue_24px --> |
| <svg class="svg-ic_remove_from_queue_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_remove_from_queue_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_remove_from_queue_24px</h2> |
| </li> |
| <li title="ic_repeat_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_repeat_24px --> |
| <svg class="svg-ic_repeat_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_repeat_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_repeat_24px</h2> |
| </li> |
| <li title="ic_repeat_one_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_repeat_one_24px --> |
| <svg class="svg-ic_repeat_one_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_repeat_one_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_repeat_one_24px</h2> |
| </li> |
| <li title="ic_replay_10_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_replay_10_24px --> |
| <svg class="svg-ic_replay_10_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_replay_10_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_replay_10_24px</h2> |
| </li> |
| <li title="ic_replay_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_replay_24px --> |
| <svg class="svg-ic_replay_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_replay_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_replay_24px</h2> |
| </li> |
| <li title="ic_replay_30_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_replay_30_24px --> |
| <svg class="svg-ic_replay_30_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_replay_30_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_replay_30_24px</h2> |
| </li> |
| <li title="ic_replay_5_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_replay_5_24px --> |
| <svg class="svg-ic_replay_5_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_replay_5_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_replay_5_24px</h2> |
| </li> |
| <li title="ic_shuffle_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_shuffle_24px --> |
| <svg class="svg-ic_shuffle_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_shuffle_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_shuffle_24px</h2> |
| </li> |
| <li title="ic_skip_next_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_skip_next_24px --> |
| <svg class="svg-ic_skip_next_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_skip_next_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_skip_next_24px</h2> |
| </li> |
| <li title="ic_skip_previous_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_skip_previous_24px --> |
| <svg class="svg-ic_skip_previous_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_skip_previous_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_skip_previous_24px</h2> |
| </li> |
| <li title="ic_slow_motion_video_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_slow_motion_video_24px --> |
| <svg class="svg-ic_slow_motion_video_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_slow_motion_video_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_slow_motion_video_24px</h2> |
| </li> |
| <li title="ic_snooze_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_snooze_24px --> |
| <svg class="svg-ic_snooze_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_snooze_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_snooze_24px</h2> |
| </li> |
| <li title="ic_sort_by_alpha_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_sort_by_alpha_24px --> |
| <svg class="svg-ic_sort_by_alpha_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_sort_by_alpha_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_sort_by_alpha_24px</h2> |
| </li> |
| <li title="ic_stop_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_stop_24px --> |
| <svg class="svg-ic_stop_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_stop_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_stop_24px</h2> |
| </li> |
| <li title="ic_subscriptions_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_subscriptions_24px --> |
| <svg class="svg-ic_subscriptions_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_subscriptions_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_subscriptions_24px</h2> |
| </li> |
| <li title="ic_subtitles_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_subtitles_24px --> |
| <svg class="svg-ic_subtitles_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_subtitles_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_subtitles_24px</h2> |
| </li> |
| <li title="ic_surround_sound_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_surround_sound_24px --> |
| <svg class="svg-ic_surround_sound_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_surround_sound_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_surround_sound_24px</h2> |
| </li> |
| <li title="ic_video_library_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_video_library_24px --> |
| <svg class="svg-ic_video_library_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_video_library_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_video_library_24px</h2> |
| </li> |
| <li title="ic_videocam_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_videocam_24px --> |
| <svg class="svg-ic_videocam_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_videocam_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_videocam_24px</h2> |
| </li> |
| <li title="ic_videocam_off_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_videocam_off_24px --> |
| <svg class="svg-ic_videocam_off_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_videocam_off_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_videocam_off_24px</h2> |
| </li> |
| <li title="ic_volume_down_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_volume_down_24px --> |
| <svg class="svg-ic_volume_down_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_volume_down_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_volume_down_24px</h2> |
| </li> |
| <li title="ic_volume_mute_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_volume_mute_24px --> |
| <svg class="svg-ic_volume_mute_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_volume_mute_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_volume_mute_24px</h2> |
| </li> |
| <li title="ic_volume_off_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_volume_off_24px --> |
| <svg class="svg-ic_volume_off_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_volume_off_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_volume_off_24px</h2> |
| </li> |
| <li title="ic_volume_up_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_volume_up_24px --> |
| <svg class="svg-ic_volume_up_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_volume_up_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_volume_up_24px</h2> |
| </li> |
| <li title="ic_web_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_web_24px --> |
| <svg class="svg-ic_web_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_web_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_web_24px</h2> |
| </li> |
| <li title="ic_web_asset_24px"> |
| <div class="icon-box"> |
| |
| <!-- ic_web_asset_24px --> |
| <svg class="svg-ic_web_asset_24px-dims"> |
| <use xlink:href="svg-sprite-av-symbol.svg#ic_web_asset_24px"></use> |
| </svg> |
| |
| </div> |
| <h2>ic_web_asset_24px</h2> |
| </li> |
| </ul> |
| |
| <!-- |
| ==================================================================================================== |
| --> |
| |
| </section> |
| <footer> |
| <p>Generated at Tue, 17 Nov 2015 23:07:28 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p> |
| </footer> |
| </body> |
| </html> |
