svg-sprite-av.html 64.9 KB
    1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136
  137
  138
  139
  140
  141
  142
  143
  144
  145
  146
  147
  148
  149
  150
  151
  152
  153
  154
  155
  156
  157
  158
  159
  160
  161
  162
  163
  164
  165
  166
  167
  168
  169
  170
  171
  172
  173
  174
  175
  176
  177
  178
  179
  180
  181
  182
  183
  184
  185
  186
  187
  188
  189
  190
  191
  192
  193
  194
  195
  196
  197
  198
  199
  200
  201
  202
  203
  204
  205
  206
  207
  208
  209
  210
  211
  212
  213
  214
  215
  216
  217
  218
  219
  220
  221
  222
  223
  224
  225
  226
  227
  228
  229
  230
  231
  232
  233
  234
  235
  236
  237
  238
  239
  240
  241
  242
  243
  244
  245
  246
  247
  248
  249
  250
  251
  252
  253
  254
  255
  256
  257
  258
  259
  260
  261
  262
  263
  264
  265
  266
  267
  268
  269
  270
  271
  272
  273
  274
  275
  276
  277
  278
  279
  280
  281
  282
  283
  284
  285
  286
  287
  288
  289
  290
  291
  292
  293
  294
  295
  296
  297
  298
  299
  300
  301
  302
  303
  304
  305
  306
  307
  308
  309
  310
  311
  312
  313
  314
  315
  316
  317
  318
  319
  320
  321
  322
  323
  324
  325
  326
  327
  328
  329
  330
  331
  332
  333
  334
  335
  336
  337
  338
  339
  340
  341
  342
  343
  344
  345
  346
  347
  348
  349
  350
  351
  352
  353
  354
  355
  356
  357
  358
  359
  360
  361
  362
  363
  364
  365
  366
  367
  368
  369
  370
  371
  372
  373
  374
  375
  376
  377
  378
  379
  380
  381
  382
  383
  384
  385
  386
  387
  388
  389
  390
  391
  392
  393
  394
  395
  396
  397
  398
  399
  400
  401
  402
  403
  404
  405
  406
  407
  408
  409
  410
  411
  412
  413
  414
  415
  416
  417
  418
  419
  420
  421
  422
  423
  424
  425
  426
  427
  428
  429
  430
  431
  432
  433
  434
  435
  436
  437
  438
  439
  440
  441
  442
  443
  444
  445
  446
  447
  448
  449
  450
  451
  452
  453
  454
  455
  456
  457
  458
  459
  460
  461
  462
  463
  464
  465
  466
  467
  468
  469
  470
  471
  472
  473
  474
  475
  476
  477
  478
  479
  480
  481
  482
  483
  484
  485
  486
  487
  488
  489
  490
  491
  492
  493
  494
  495
  496
  497
  498
  499
  500
  501
  502
  503
  504
  505
  506
  507
  508
  509
  510
  511
  512
  513
  514
  515
  516
  517
  518
  519
  520
  521
  522
  523
  524
  525
  526
  527
  528
  529
  530
  531
  532
  533
  534
  535
  536
  537
  538
  539
  540
  541
  542
  543
  544
  545
  546
  547
  548
  549
  550
  551
  552
  553
  554
  555
  556
  557
  558
  559
  560
  561
  562
  563
  564
  565
  566
  567
  568
  569
  570
  571
  572
  573
  574
  575
  576
  577
  578
  579
  580
  581
  582
  583
  584
  585
  586
  587
  588
  589
  590
  591
  592
  593
  594
  595
  596
  597
  598
  599
  600
  601
  602
  603
  604
  605
  606
  607
  608
  609
  610
  611
  612
  613
  614
  615
  616
  617
  618
  619
  620
  621
  622
  623
  624
  625
  626
  627
  628
  629
  630
  631
  632
  633
  634
  635
  636
  637
  638
  639
  640
  641
  642
  643
  644
  645
  646
  647
  648
  649
  650
  651
  652
  653
  654
  655
  656
  657
  658
  659
  660
  661
  662
  663
  664
  665
  666
  667
  668
  669
  670
  671
  672
  673
  674
  675
  676
  677
  678
  679
  680
  681
  682
  683
  684
  685
  686
  687
  688
  689
  690
  691
  692
  693
  694
  695
  696
  697
  698
  699
  700
  701
  702
  703
  704
  705
  706
  707
  708
  709
  710
  711
  712
  713
  714
  715
  716
  717
  718
  719
  720
  721
  722
  723
  724
  725
  726
  727
  728
  729
  730
  731
  732
  733
  734
  735
  736
  737
  738
  739
  740
  741
  742
  743
  744
  745
  746
  747
  748
  749
  750
  751
  752
  753
  754
  755
  756
  757
  758
  759
  760
  761
  762
  763
  764
  765
  766
  767
  768
  769
  770
  771
  772
  773
  774
  775
  776
  777
  778
  779
  780
  781
  782
  783
  784
  785
  786
  787
  788
  789
  790
  791
  792
  793
  794
  795
  796
  797
  798
  799
  800
  801
  802
  803
  804
  805
  806
  807
  808
  809
  810
  811
  812
  813
  814
  815
  816
  817
  818
  819
  820
  821
  822
  823
  824
  825
  826
  827
  828
  829
  830
  831
  832
  833
  834
  835
  836
  837
  838
  839
  840
  841
  842
  843
  844
  845
  846
  847
  848
  849
  850
  851
  852
  853
  854
  855
  856
  857
  858
  859
  860
  861
  862
  863
  864
  865
  866
  867
  868
  869
  870
  871
  872
  873
  874
  875
  876
  877
  878
  879
  880
  881
  882
  883
  884
  885
  886
  887
  888
  889
  890
  891
  892
  893
  894
  895
  896
  897
  898
  899
  900
  901
  902
  903
  904
  905
  906
  907
  908
  909
  910
  911
  912
  913
  914
  915
  916
  917
  918
  919
  920
  921
  922
  923
  924
  925
  926
  927
  928
  929
  930
  931
  932
  933
  934
  935
  936
  937
  938
  939
  940
  941
  942
  943
  944
  945
  946
  947
  948
  949
  950
  951
  952
  953
  954
  955
  956
  957
  958
  959
  960
  961
  962
  963
  964
  965
  966
  967
  968
  969
  970
  971
  972
  973
  974
  975
  976
  977
  978
  979
  980
  981
  982
  983
  984
  985
  986
  987
  988
  989
  990
  991
  992
  993
  994
  995
  996
  997
  998
  999
 1000
 1001
 1002
 1003
 1004
 1005
 1006
 1007
 1008
 1009
 1010
 1011
 1012
 1013
 1014
 1015
 1016
 1017
 1018
 1019
 1020
 1021
 1022
 1023
 1024
 1025
 1026
 1027
 1028
 1029
 1030
 1031
 1032
 1033
 1034
 1035
 1036
 1037
 1038
 1039
 1040
 1041
 1042
 1043
 1044
 1045
 1046
 1047
 1048
 1049
 1050
 1051
 1052
 1053
 1054
 1055
 1056
 1057
 1058
 1059
 1060
 1061
 1062
 1063
 1064
 1065
 1066
 1067
 1068
 1069
 1070
 1071
 1072
 1073
 1074
 1075
 1076
 1077
 1078
 1079
 1080
 1081
 1082
 1083
 1084
 1085
 1086
 1087
 1088
 1089
 1090
 1091
 1092
 1093
 1094
 1095
 1096
 1097
 1098
 1099
 1100
 1101
 1102
 1103
 1104
 1105
 1106
 1107
 1108
 1109
 1110
 1111
 1112
 1113
 1114
 1115
 1116
 1117
 1118
 1119
 1120
 1121
 1122
 1123
 1124
 1125
 1126
 1127
 1128
 1129
 1130
 1131
 1132
 1133
 1134
 1135
 1136
 1137
 1138
 1139
 1140
 1141
 1142
 1143
 1144
 1145
 1146
 1147
 1148
 1149
 1150
 1151
 1152
 1153
 1154
 1155
 1156
 1157
 1158
 1159
 1160
 1161
 1162
 1163
 1164
 1165
 1166
 1167
 1168
 1169
 1170
 1171
 1172
 1173
 1174
 1175
 1176
 1177
 1178
 1179
 1180
 1181
 1182
 1183
 1184
 1185
 1186
 1187
 1188
 1189
 1190
 1191
 1192
 1193
 1194
 1195
 1196
 1197
 1198
 1199
 1200
 1201
 1202
 1203
 1204
 1205
 1206
 1207
 1208
 1209
 1210
 1211
 1212
 1213
 1214
 1215
 1216
 1217
 1218
 1219
 1220
 1221
 1222
 1223
 1224
 1225
 1226
 1227
 1228
 1229
 1230
 1231
 1232
 1233
 1234
 1235
 1236
 1237
 1238
 1239
<!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/svg4everybody.js"></script>
<title>SVG 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 image dimensions
====================================================================================================
You will need to set the sprite image 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_album_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_games_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_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_my_library_add_24px-dims { width: 24px; height: 24px; }
.svg-ic_my_library_books_24px-dims { width: 24px; height: 24px; }
.svg-ic_my_library_music_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_fill_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_fill_24px-dims { width: 24px; height: 24px; }
.svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; }
.svg-ic_play_shopping_bag_24px-dims { width: 24px; height: 24px; }
.svg-ic_playlist_add_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_radio_24px-dims { width: 24px; height: 24px; }
.svg-ic_recent_actors_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_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_snooze_24px-dims { width: 24px; height: 24px; }
.svg-ic_stop_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_collection_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; }
</style>
<!--
====================================================================================================
-->

</head>
<body>
<!--
Inline 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">
<defs>
<svg width="24" height="24" viewBox="0 0 24 24" id="ic_album_24px" y="0"><path d="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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"/><path d="M0 0h24v24H0z" fill="none"/></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"/><path d="M0 0h24v24H0z" fill="none"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_games_24px" y="168"><path d="M0 0h24v24H0z" fill="none"/><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"/><path d="M0 0h24v24H0z" fill="none"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_high_quality_24px" y="216"><path d="M0 0h24v24H0z" fill="none"/><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"/><path d="M0 0h24v24H0z" fill="none"/></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"/><path d="M0 0h24v24H0z" fill="none"/></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"/><path d="M0 0h24v24H0z" fill="none"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_mic_off_24px" y="312"><path d="M0 0h24v24H0zm0 0h24v24H0z" fill="none"/><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"/><path d="M0 0h24v24H0z" fill="none"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_my_library_add_24px" y="360"><path d="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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"/><path d="M0 0h24v24H0z" fill="none"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_pause_circle_fill_24px" y="504"><path d="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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"/><path d="M0 0h24v24H0z" fill="none"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_play_circle_fill_24px" y="576"><path d="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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"/><path d="M0 0h24v24H0z" fill="none"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_recent_actors_24px" y="744"><path d="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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"/><path d="M0 0h24v24H0z" fill="none"/></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"/><path d="M0 0h24v24H0z" fill="none"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_snooze_24px" y="912"><path d="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" id="ic_subtitles_24px" y="960"><path d="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0z" fill="none"/><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="M0 0h24v24H0zm0 0h24v24H0z" fill="none"/><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"/><path d="M0 0h24v24H0z" fill="none"/></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"/><path d="M0 0h24v24H0z" fill="none"/></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"/><path d="M0 0h24v24H0z" fill="none"/></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"/><path d="M0 0h24v24H0z" fill="none"/></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"/><path d="M0 0h24v24H0z" fill="none"/></svg> </defs>
</svg><!--
====================================================================================================
-->
<header>
<h1>SVG 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/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>

<!--
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_album_24px">
<div class="icon-box">
<!-- ic_album_24px -->
<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">
<use xlink:href="#ic_album_24px"></use>
</svg>
</div>
<h2>ic_album_24px</h2>
</li>
<li title="ic_av_timer_24px">
<div class="icon-box">
<!-- ic_av_timer_24px -->
<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">
<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 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">
<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 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">
<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 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">
<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 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">
<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 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">
<use xlink:href="#ic_fast_rewind_24px"></use>
</svg>
</div>
<h2>ic_fast_rewind_24px</h2>
</li>
<li title="ic_games_24px">
<div class="icon-box">
<!-- ic_games_24px -->
<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">
<use xlink:href="#ic_games_24px"></use>
</svg>
</div>
<h2>ic_games_24px</h2>
</li>
<li title="ic_hearing_24px">
<div class="icon-box">
<!-- ic_hearing_24px -->
<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">
<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 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">
<use xlink:href="#ic_high_quality_24px"></use>
</svg>
</div>
<h2>ic_high_quality_24px</h2>
</li>
<li title="ic_loop_24px">
<div class="icon-box">
<!-- ic_loop_24px -->
<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">
<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 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">
<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 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">
<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 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">
<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 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">
<use xlink:href="#ic_movie_24px"></use>
</svg>
</div>
<h2>ic_movie_24px</h2>
</li>
<li title="ic_my_library_add_24px">
<div class="icon-box">
<!-- ic_my_library_add_24px -->
<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">
<use xlink:href="#ic_my_library_add_24px"></use>
</svg>
</div>
<h2>ic_my_library_add_24px</h2>
</li>
<li title="ic_my_library_books_24px">
<div class="icon-box">
<!-- ic_my_library_books_24px -->
<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">
<use xlink:href="#ic_my_library_books_24px"></use>
</svg>
</div>
<h2>ic_my_library_books_24px</h2>
</li>
<li title="ic_my_library_music_24px">
<div class="icon-box">
<!-- ic_my_library_music_24px -->
<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">
<use xlink:href="#ic_my_library_music_24px"></use>
</svg>
</div>
<h2>ic_my_library_music_24px</h2>
</li>
<li title="ic_new_releases_24px">
<div class="icon-box">
<!-- ic_new_releases_24px -->
<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">
<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 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">
<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 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">
<use xlink:href="#ic_pause_24px"></use>
</svg>
</div>
<h2>ic_pause_24px</h2>
</li>
<li title="ic_pause_circle_fill_24px">
<div class="icon-box">
<!-- ic_pause_circle_fill_24px -->
<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">
<use xlink:href="#ic_pause_circle_fill_24px"></use>
</svg>
</div>
<h2>ic_pause_circle_fill_24px</h2>
</li>
<li title="ic_pause_circle_outline_24px">
<div class="icon-box">
<!-- ic_pause_circle_outline_24px -->
<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">
<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 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">
<use xlink:href="#ic_play_arrow_24px"></use>
</svg>
</div>
<h2>ic_play_arrow_24px</h2>
</li>
<li title="ic_play_circle_fill_24px">
<div class="icon-box">
<!-- ic_play_circle_fill_24px -->
<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">
<use xlink:href="#ic_play_circle_fill_24px"></use>
</svg>
</div>
<h2>ic_play_circle_fill_24px</h2>
</li>
<li title="ic_play_circle_outline_24px">
<div class="icon-box">
<!-- ic_play_circle_outline_24px -->
<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">
<use xlink:href="#ic_play_circle_outline_24px"></use>
</svg>
</div>
<h2>ic_play_circle_outline_24px</h2>
</li>
<li title="ic_play_shopping_bag_24px">
<div class="icon-box">
<!-- ic_play_shopping_bag_24px -->
<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">
<use xlink:href="#ic_play_shopping_bag_24px"></use>
</svg>
</div>
<h2>ic_play_shopping_bag_24px</h2>
</li>
<li title="ic_playlist_add_24px">
<div class="icon-box">
<!-- ic_playlist_add_24px -->
<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">
<use xlink:href="#ic_playlist_add_24px"></use>
</svg>
</div>
<h2>ic_playlist_add_24px</h2>
</li>
<li title="ic_queue_24px">
<div class="icon-box">
<!-- ic_queue_24px -->
<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">
<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 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">
<use xlink:href="#ic_queue_music_24px"></use>
</svg>
</div>
<h2>ic_queue_music_24px</h2>
</li>
<li title="ic_radio_24px">
<div class="icon-box">
<!-- ic_radio_24px -->
<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">
<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 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">
<use xlink:href="#ic_recent_actors_24px"></use>
</svg>
</div>
<h2>ic_recent_actors_24px</h2>
</li>
<li title="ic_repeat_24px">
<div class="icon-box">
<!-- ic_repeat_24px -->
<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">
<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 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">
<use xlink:href="#ic_repeat_one_24px"></use>
</svg>
</div>
<h2>ic_repeat_one_24px</h2>
</li>
<li title="ic_replay_24px">
<div class="icon-box">
<!-- ic_replay_24px -->
<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">
<use xlink:href="#ic_replay_24px"></use>
</svg>
</div>
<h2>ic_replay_24px</h2>
</li>
<li title="ic_shuffle_24px">
<div class="icon-box">
<!-- ic_shuffle_24px -->
<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">
<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 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">
<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 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">
<use xlink:href="#ic_skip_previous_24px"></use>
</svg>
</div>
<h2>ic_skip_previous_24px</h2>
</li>
<li title="ic_snooze_24px">
<div class="icon-box">
<!-- ic_snooze_24px -->
<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">
<use xlink:href="#ic_snooze_24px"></use>
</svg>
</div>
<h2>ic_snooze_24px</h2>
</li>
<li title="ic_stop_24px">
<div class="icon-box">
<!-- ic_stop_24px -->
<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">
<use xlink:href="#ic_stop_24px"></use>
</svg>
</div>
<h2>ic_stop_24px</h2>
</li>
<li title="ic_subtitles_24px">
<div class="icon-box">
<!-- ic_subtitles_24px -->
<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">
<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 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">
<use xlink:href="#ic_surround_sound_24px"></use>
</svg>
</div>
<h2>ic_surround_sound_24px</h2>
</li>
<li title="ic_video_collection_24px">
<div class="icon-box">
<!-- ic_video_collection_24px -->
<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">
<use xlink:href="#ic_video_collection_24px"></use>
</svg>
</div>
<h2>ic_video_collection_24px</h2>
</li>
<li title="ic_videocam_24px">
<div class="icon-box">
<!-- ic_videocam_24px -->
<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">
<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 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">
<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 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">
<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 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">
<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 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">
<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 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">
<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 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">
<use xlink:href="#ic_web_24px"></use>
</svg>
</div>
<h2>ic_web_24px</h2>
</li>
</ul>
<!--
====================================================================================================
-->

<!--
Inline SVG with external sprite
====================================================================================================
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_album_24px">
<div class="icon-box">
<!-- ic_album_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_album_24px"></use>
</svg>
</div>
<h2>ic_album_24px</h2>
</li>
<li title="ic_av_timer_24px">
<div class="icon-box">
<!-- ic_av_timer_24px -->
<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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.svg#ic_fast_rewind_24px"></use>
</svg>
</div>
<h2>ic_fast_rewind_24px</h2>
</li>
<li title="ic_games_24px">
<div class="icon-box">
<!-- ic_games_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_games_24px"></use>
</svg>
</div>
<h2>ic_games_24px</h2>
</li>
<li title="ic_hearing_24px">
<div class="icon-box">
<!-- ic_hearing_24px -->
<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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.svg#ic_high_quality_24px"></use>
</svg>
</div>
<h2>ic_high_quality_24px</h2>
</li>
<li title="ic_loop_24px">
<div class="icon-box">
<!-- ic_loop_24px -->
<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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.svg#ic_movie_24px"></use>
</svg>
</div>
<h2>ic_movie_24px</h2>
</li>
<li title="ic_my_library_add_24px">
<div class="icon-box">
<!-- ic_my_library_add_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_my_library_add_24px"></use>
</svg>
</div>
<h2>ic_my_library_add_24px</h2>
</li>
<li title="ic_my_library_books_24px">
<div class="icon-box">
<!-- ic_my_library_books_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_my_library_books_24px"></use>
</svg>
</div>
<h2>ic_my_library_books_24px</h2>
</li>
<li title="ic_my_library_music_24px">
<div class="icon-box">
<!-- ic_my_library_music_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_my_library_music_24px"></use>
</svg>
</div>
<h2>ic_my_library_music_24px</h2>
</li>
<li title="ic_new_releases_24px">
<div class="icon-box">
<!-- ic_new_releases_24px -->
<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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.svg#ic_pause_24px"></use>
</svg>
</div>
<h2>ic_pause_24px</h2>
</li>
<li title="ic_pause_circle_fill_24px">
<div class="icon-box">
<!-- ic_pause_circle_fill_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_pause_circle_fill_24px"></use>
</svg>
</div>
<h2>ic_pause_circle_fill_24px</h2>
</li>
<li title="ic_pause_circle_outline_24px">
<div class="icon-box">
<!-- ic_pause_circle_outline_24px -->
<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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.svg#ic_play_arrow_24px"></use>
</svg>
</div>
<h2>ic_play_arrow_24px</h2>
</li>
<li title="ic_play_circle_fill_24px">
<div class="icon-box">
<!-- ic_play_circle_fill_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_play_circle_fill_24px"></use>
</svg>
</div>
<h2>ic_play_circle_fill_24px</h2>
</li>
<li title="ic_play_circle_outline_24px">
<div class="icon-box">
<!-- ic_play_circle_outline_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_play_circle_outline_24px"></use>
</svg>
</div>
<h2>ic_play_circle_outline_24px</h2>
</li>
<li title="ic_play_shopping_bag_24px">
<div class="icon-box">
<!-- ic_play_shopping_bag_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_play_shopping_bag_24px"></use>
</svg>
</div>
<h2>ic_play_shopping_bag_24px</h2>
</li>
<li title="ic_playlist_add_24px">
<div class="icon-box">
<!-- ic_playlist_add_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_playlist_add_24px"></use>
</svg>
</div>
<h2>ic_playlist_add_24px</h2>
</li>
<li title="ic_queue_24px">
<div class="icon-box">
<!-- ic_queue_24px -->
<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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.svg#ic_queue_music_24px"></use>
</svg>
</div>
<h2>ic_queue_music_24px</h2>
</li>
<li title="ic_radio_24px">
<div class="icon-box">
<!-- ic_radio_24px -->
<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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.svg#ic_recent_actors_24px"></use>
</svg>
</div>
<h2>ic_recent_actors_24px</h2>
</li>
<li title="ic_repeat_24px">
<div class="icon-box">
<!-- ic_repeat_24px -->
<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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.svg#ic_repeat_one_24px"></use>
</svg>
</div>
<h2>ic_repeat_one_24px</h2>
</li>
<li title="ic_replay_24px">
<div class="icon-box">
<!-- ic_replay_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_replay_24px"></use>
</svg>
</div>
<h2>ic_replay_24px</h2>
</li>
<li title="ic_shuffle_24px">
<div class="icon-box">
<!-- ic_shuffle_24px -->
<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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.svg#ic_skip_previous_24px"></use>
</svg>
</div>
<h2>ic_skip_previous_24px</h2>
</li>
<li title="ic_snooze_24px">
<div class="icon-box">
<!-- ic_snooze_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_snooze_24px"></use>
</svg>
</div>
<h2>ic_snooze_24px</h2>
</li>
<li title="ic_stop_24px">
<div class="icon-box">
<!-- ic_stop_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_stop_24px"></use>
</svg>
</div>
<h2>ic_stop_24px</h2>
</li>
<li title="ic_subtitles_24px">
<div class="icon-box">
<!-- ic_subtitles_24px -->
<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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.svg#ic_surround_sound_24px"></use>
</svg>
</div>
<h2>ic_surround_sound_24px</h2>
</li>
<li title="ic_video_collection_24px">
<div class="icon-box">
<!-- ic_video_collection_24px -->
<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">
<use xlink:href="svg/sprite.svg#ic_video_collection_24px"></use>
</svg>
</div>
<h2>ic_video_collection_24px</h2>
</li>
<li title="ic_videocam_24px">
<div class="icon-box">
<!-- ic_videocam_24px -->
<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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.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 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">
<use xlink:href="svg/sprite.svg#ic_web_24px"></use>
</svg>
</div>
<h2>ic_web_24px</h2>
</li>
</ul>
<!--
====================================================================================================
-->
</section>
<footer>
<p>Generated at Wed, 15 Oct 2014 21:41:53 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p>
</footer>
</body>
</html>