Use SVG for the icons for the default_light theme

README.md

@@ -54,6 +54,8 @@ The [Subsonic source code](https://github.com/airsonic/subsonic-svn) was release
 The cover zooming feature is provided by [jquery.fancyzoom](https://github.com/keegnotrub/jquery.fancyzoom),
 released under [MIT License](http://www.opensource.org/licenses/mit-license.php).
 
+The icons are from the amazing [feather](https://feathericons.com/) project,
+and are licensed under [MIT license](https://github.com/feathericons/feather/blob/master/LICENSE).
 
 Usage
 -----

airsonic-main/src/main/resources/org/airsonic/player/theme/default_dark.properties

@@ -1,22 +1,23 @@
-
 # Icons used by dark themes.
 # Author: Sindre Mehus
 
 addImage = icons/default_dark/add.png
-addOverlayImage = icons/default_dark/add_overlay.png
 addNextImage = icons/default_dark/add_next.png
+addOverlayImage = icons/default_dark/add_overlay.png
 androidImage = icons/default_dark/android.png
 backImage = icons/default_dark/back.png
 castActiveImage = icons/default_dark/cast_active.png
 castIdleImage = icons/default_dark/cast_idle.png
 castPauseImage = icons/default_dark/cast_pause.png
 castPlayImage = icons/default_dark/cast_play.png
+clearImage = icons/default_light/clear.svg
 clearRatingImage = icons/default_dark/remove.png
 currentImage = icons/default_dark/current.png
 donateImage = icons/default_dark/donate.png
 donateSmallImage = icons/default_dark/donate_small.png
 downImage = icons/default_dark/down.png
 downloadImage = icons/default_dark/download.png
+errorImage = icons/default_dark/error.png
 forwardImage = icons/default_dark/forward.png
 helpImage = icons/default_dark/help.png
 helpPopupImage = icons/default_dark/help_small.png
@@ -25,33 +26,37 @@ html5Image = icons/default_dark/html5.png
 keyboardImage = icons/default_dark/keyboard.png
 logImage = icons/default_dark/log.png
 logoImage = icons/default_dark/logo_light.png
+logoutImage = icons/default_dark/logout.svg
 moreImage = icons/default_dark/more.png
 muteImage = icons/default_dark/mute.png
 nowPlayingImage = icons/default_dark/now_playing.png
 playImage = icons/default_dark/play.png
-playlistImage = icons/default_dark/playlist.png
 playOverlayImage = icons/default_dark/play_overlay.png
+playlistImage = icons/default_dark/playlist.png
 podcastImage = icons/default_dark/podcast.png
 podcastLargeImage = icons/default_dark/podcast_large.png
 randomImage = icons/default_dark/random.png
-ratingOnImage = icons/default_dark/ratingOn.png
-ratingOffImage = icons/default_dark/ratingOff.png
 ratingHalfImage = icons/default_dark/ratingHalf.png
+ratingOffImage = icons/default_dark/ratingOff.png
+ratingOnImage = icons/default_dark/ratingOn.png
 removeImage = icons/default_dark/remove.png
+repeatOff = icons/default_light/repeat_off.svg
+repeatOn = icons/default_light/repeat_on.svg
 scanningImage = icons/default_dark/spinner.gif
 searchImage = icons/default_dark/search.png
 settingsImage = icons/default_dark/settings.png
-shareSmallImage = icons/default_dark/share_small.png
-shareImage = icons/default_dark/share.png
 shareFacebookImage = icons/default_dark/share_facebook.png
+shareImage = icons/default_dark/share.png
+shareSmallImage = icons/default_dark/share_small.png
 shareTwitterImage = icons/default_dark/share_twitter.png
 shuffleImage = icons/default_dark/shuffle.png
+sidebarImage = icons/default_dark/sidebar.svg
 starredImage = icons/default_dark/starred.png
 statusImage = icons/default_dark/status.png
 statusSmallImage = icons/default_dark/status_small.png
+undoImage = icons/default_light/undo.svg
 upImage = icons/default_dark/up.png
 uploadImage = icons/default_dark/upload.png
-viewAsListImage = icons/default_dark/view_as_list.png
 viewAsGridImage = icons/default_dark/view_as_grid.png
+viewAsListImage = icons/default_dark/view_as_list.png
 volumeImage = icons/default_dark/volume.png
-errorImage = icons/default_dark/error.png

airsonic-main/src/main/resources/org/airsonic/player/theme/default_light.properties

@@ -1,57 +1,62 @@
-
 # Icons used by light themes.
 # Author: Sindre Mehus
 
-addImage = icons/default_light/add.png
+addImage = icons/default_light/add.svg
-addOverlayImage = icons/default_light/add_overlay.png
+addNextImage = icons/default_light/add_next.svg
-addNextImage = icons/default_light/add_next.png
+addOverlayImage = icons/default_light/add_overlay.svg
-androidImage = icons/default_light/android.png
+androidImage = icons/default_light/android.svg
-backImage = icons/default_light/back.png
+backImage = icons/default_light/back.svg
-castActiveImage = icons/default_light/cast_active.png
+castActiveImage = icons/default_light/cast_active.svg
-castIdleImage = icons/default_light/cast_idle.png
+castIdleImage = icons/default_light/cast_idle.svg
-castPauseImage = icons/default_light/cast_pause.png
+castPauseImage = icons/default_light/cast_pause.svg
-castPlayImage = icons/default_light/cast_play.png
+castPlayImage = icons/default_light/play.svg
-clearRatingImage = icons/default_light/remove.png
+clearImage = icons/default_light/clear.svg
-currentImage = icons/default_light/current.png
+clearRatingImage = icons/default_light/remove.svg
-donateImage = icons/default_light/donate.png
+currentImage = icons/default_light/current.svg
-donateSmallImage = icons/default_light/donate_small.png
+donateImage = icons/default_light/donate.svg
-downImage = icons/default_light/down.png
+donateSmallImage = icons/default_light/donate.svg
-downloadImage = icons/default_light/download.png
+downImage = icons/default_light/down.svg
-forwardImage = icons/default_light/forward.png
+downloadImage = icons/default_light/download.svg
-helpImage = icons/default_light/help.png
+errorImage = icons/default_light/error.svg
-helpPopupImage = icons/default_light/help_small.png
+forwardImage = icons/default_light/forward.svg
-homeImage = icons/default_light/home.png
+helpImage = icons/default_light/help.svg
+helpPopupImage = icons/default_light/help.svg
+homeImage = icons/default_light/home.svg
 html5Image = icons/default_light/html5.png
 keyboardImage = icons/default_light/keyboard.png
-logImage = icons/default_light/log.png
+logImage = icons/default_light/log.svg
 logoImage = icons/default_light/logo.png
-moreImage = icons/default_light/more.png
+logoutImage = icons/default_light/logout.svg
-muteImage = icons/default_light/mute.png
+moreImage = icons/default_light/more.svg
-nowPlayingImage = icons/default_light/now_playing.png
+muteImage = icons/default_light/mute.svg
-playImage = icons/default_light/play.png
+nowPlayingImage = icons/default_light/now_playing.svg
-playlistImage = icons/default_light/playlist.png
+playImage = icons/default_light/play.svg
-playOverlayImage = icons/default_light/play_overlay.png
+playOverlayImage = icons/default_light/play_overlay.svg
-podcastImage = icons/default_light/podcast.png
+playlistImage = icons/default_light/playlist.svg
-podcastLargeImage = icons/default_light/podcast_large.png
+podcastImage = icons/default_light/podcast.svg
-randomImage = icons/default_light/random.png
+podcastLargeImage = icons/default_light/podcast.svg
-ratingOnImage = icons/default_light/ratingOn.png
+randomImage = icons/default_dark/random.png
-ratingOffImage = icons/default_light/ratingOff.png
 ratingHalfImage = icons/default_light/ratingHalf.png
-removeImage = icons/default_light/remove.png
+ratingOffImage = icons/default_light/ratingOff.svg
+ratingOnImage = icons/default_light/ratingOn.svg
+removeImage = icons/default_light/remove.svg
+repeatOff = icons/default_light/repeat_off.svg
+repeatOn = icons/default_light/repeat_on.svg
 scanningImage = icons/default_light/spinner.gif
-searchImage = icons/default_light/search.png
+searchImage = icons/default_light/search.svg
-settingsImage = icons/default_light/settings.png
+settingsImage = icons/default_light/settings.svg
-shareSmallImage = icons/default_light/share_small.png
+shareFacebookImage = icons/default_light/share_facebook.svg
-shareImage = icons/default_light/share.png
+shareImage = icons/default_light/share.svg
-shareFacebookImage = icons/default_light/share_facebook.png
+shareSmallImage = icons/default_light/share.svg
-shareTwitterImage = icons/default_light/share_twitter.png
+shareTwitterImage = icons/default_light/share_twitter.svg
-shuffleImage = icons/default_light/shuffle.png
+shuffleImage = icons/default_light/shuffle.svg
-starredImage = icons/default_light/starred.png
+sidebarImage = icons/default_light/sidebar.svg
-statusImage = icons/default_light/status.png
+starredImage = icons/default_light/starred.svg
-statusSmallImage = icons/default_light/status_small.png
+statusImage = icons/default_light/status.svg
-upImage = icons/default_light/up.png
+statusSmallImage = icons/default_light/status.svg
-uploadImage = icons/default_light/upload.png
+undoImage = icons/default_light/undo.svg
-viewAsListImage = icons/default_light/view_as_list.png
+upImage = icons/default_light/up.svg
-viewAsGridImage = icons/default_light/view_as_grid.png
+uploadImage = icons/default_light/upload.svg
-volumeImage = icons/default_light/volume.png
+viewAsGridImage = icons/default_light/view_as_grid.svg
-errorImage = icons/default_light/error.png
+viewAsListImage = icons/default_light/view_as_list.svg
+volumeImage = icons/default_light/volume.svg

airsonic-main/src/main/webapp/WEB-INF/jsp/albumMain.jsp

@@ -164,7 +164,7 @@
 <div style="float:left">
     <h1>
         <img id="starImage" src="<spring:theme code="${not empty model.dir.starredDate ? 'ratingOnImage' : 'ratingOffImage'}"/>"
-             onclick="toggleStar(${model.dir.id}, '#starImage'); return false;" style="cursor:pointer" alt="">
+             onclick="toggleStar(${model.dir.id}, '#starImage'); return false;" style="cursor:pointer;height:18px;" alt="">
 
         <span style="vertical-align: middle">
             <c:forEach items="${model.ancestors}" var="ancestor">
@@ -239,7 +239,7 @@
     </c:if>
 
     <c:if test="${model.user.shareRole}">
-        <span class="header"><a href="${shareUrl}"><img src="<spring:theme code="shareSmallImage"/>" alt=""></a>
+        <span class="header"><a href="${shareUrl}"><img src="<spring:theme code="shareSmallImage"/>" style="height:18px;" alt=""></a>
             <a href="${shareUrl}"><fmt:message key="main.sharealbum"/></a> </span> |
     </c:if>
 

airsonic-main/src/main/webapp/WEB-INF/jsp/artistMain.jsp

@@ -164,8 +164,8 @@
 
 <div style="float:left">
     <h1>
-        <img id="starImage" src="<spring:theme code="${not empty model.dir.starredDate ? 'ratingOnImage' : 'ratingOffImage'}"/>"
+        <img id="starImage" style="height:18px" src="<spring:theme code="${not empty model.dir.starredDate ? 'ratingOnImage' : 'ratingOffImage'}"/>"
-             onclick="toggleStar(${model.dir.id}, '#starImage'); return false;" style="cursor:pointer" alt="">
+             onclick="toggleStar(${model.dir.id}, '#starImage'); return false;" style="cursor:pointer;height:18px;" alt="">
 
         <span style="vertical-align: middle">
             <c:forEach items="${model.ancestors}" var="ancestor">
@@ -321,7 +321,7 @@
     <tbody id="topSongsBody">
     <tr id="pattern" style="display:none;margin:0;padding:0;border:0">
         <td class="fit">
-            <img id="starSong" onclick="toggleStarTopSong(this.id.substring(8) - 1, '#starSong' + this.id.substring(8))" src="<spring:theme code="ratingOffImage"/>"
+            <img id="starSong" style="height:18px;" onclick="toggleStarTopSong(this.id.substring(8) - 1, '#starSong' + this.id.substring(8))" src="<spring:theme code="ratingOffImage"/>"
                  style="cursor:pointer" alt="" title=""></td>
         <td class="fit">
             <img id="play" src="<spring:theme code="playImage"/>" alt="<fmt:message key="common.play"/>" title="<fmt:message key="common.play"/>"

airsonic-main/src/main/webapp/WEB-INF/jsp/createShare.jsp

@@ -7,7 +7,7 @@
 <body class="mainframe bgcolor1">
 
 <h1>
-    <img src="<spring:theme code="shareImage"/>" alt="">
+    <img src="<spring:theme code="shareImage"/>" alt="" style="height:18px;">
     <span style="vertical-align: middle"><fmt:message key="share.title"/></span>
 </h1>
 

airsonic-main/src/main/webapp/WEB-INF/jsp/homePager.jsp

@@ -76,7 +76,11 @@
 
         <c:if test="${not empty model.albums}">
             <td style="padding-left: 2em">
-                <a href="javascript:playShuffle()"><img src="<spring:theme code="shuffleImage"/>" alt="">&nbsp;<fmt:message key="home.shuffle"/></a></td>
+                <a href="javascript:playShuffle()">
+                  <img src="<spring:theme code="shuffleImage"/>" alt="Shuffle" style="height:16px;">
+                  <fmt:message key="home.shuffle"/>
+                </a>
+            </td>
         </c:if>
     </tr>
 </table>

airsonic-main/src/main/webapp/WEB-INF/jsp/left.jsp

@@ -143,7 +143,7 @@
                 <h2 style="padding:0;margin:0;border:0">${fn:escapeXml(entry.key.index)}</h2>
             </th>
             <th style="text-align:right;">
-                <a href="#top"><img src="<spring:theme code="upImage"/>" alt=""></a>
+                <a href="#top"><img src="<spring:theme code="upImage"/>" alt="" style="height:18px;"></a>
             </th>
         </tr>
     </table>

airsonic-main/src/main/webapp/WEB-INF/jsp/playButtons.jsp

@@ -18,11 +18,11 @@ PARAMETERS
     <c:if test="${param.asTable}"><td class="fit"></c:if>
     <c:choose>
         <c:when test="${param.starred}">
-            <img id="starImage${param.id}" src="<spring:theme code="ratingOnImage"/>" alt="" style="cursor:pointer"
+            <img id="starImage${param.id}" src="<spring:theme code="ratingOnImage"/>" alt="" style="cursor:pointer;height:18px;"
                  onclick="toggleStar(${param.id}, '#starImage${param.id}'); return false;">
         </c:when>
         <c:otherwise>
-            <img id="starImage${param.id}" src="<spring:theme code="ratingOffImage"/>" alt="" style="cursor:pointer"
+            <img id="starImage${param.id}" src="<spring:theme code="ratingOffImage"/>" alt="" style="cursor:pointer;height:18px;"
                  onclick="toggleStar(${param.id}, '#starImage${param.id}'); return false;">
         </c:otherwise>
     </c:choose>
@@ -41,11 +41,11 @@ PARAMETERS
                      title="<fmt:message key="common.play"/>"></a>
         </c:when>
         <c:when test="${not empty param.onPlay}">
-            <img src="<spring:theme code="playImage"/>" alt="<fmt:message key="common.play"/>" style="cursor:pointer"
+            <img src="<spring:theme code="playImage"/>" alt="<fmt:message key="common.play"/>" style="cursor:pointer; height:18px;"
                  onclick="${param.onPlay}; return false;" title="<fmt:message key="common.play"/>">
         </c:when>
         <c:otherwise>
-            <img src="<spring:theme code="playImage"/>" alt="<fmt:message key="common.play"/>" style="cursor:pointer"
+            <img src="<spring:theme code="playImage"/>" alt="<fmt:message key="common.play"/>" style="cursor:pointer; height:18px;"
                  onclick="top.playQueue.onPlay(${param.id}); return false;" title="<fmt:message key="common.play"/>">
         </c:otherwise>
     </c:choose>
@@ -56,7 +56,7 @@ PARAMETERS
 <c:if test="${(empty param.addEnabled or param.addEnabled) and not param.video}">
     <img id="add${param.id}" src="<spring:theme code="addImage"/>" alt="<fmt:message key="main.addlast"/>"
          onclick="top.playQueue.onAdd(${param.id}); $().toastmessage('showSuccessToast', '<fmt:message key="main.addlast.toast"/>'); return false;"
-         style="cursor:pointer" title="<fmt:message key="main.addlast"/>">
+         style="cursor:pointer; height:18px;" title="<fmt:message key="main.addlast"/>">
 </c:if>
 <c:if test="${param.asTable}"></td></c:if>
 
@@ -64,7 +64,7 @@ PARAMETERS
 <c:if test="${(empty param.addEnabled or param.addEnabled) and not param.video}">
     <img id="add${param.id}" src="<spring:theme code="addNextImage"/>" alt="<fmt:message key="main.addnext"/>"
          onclick="top.playQueue.onAddNext(${param.id}); $().toastmessage('showSuccessToast', '<fmt:message key="main.addnext.toast"/>'); return false;"
-         style="cursor:pointer" title="<fmt:message key="main.addnext"/>">
+         style="cursor:pointer; height:18px;" title="<fmt:message key="main.addnext"/>">
 </c:if>
 <c:if test="${param.asTable}"></td></c:if>
 

airsonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp

@@ -420,9 +420,11 @@
             if (radioEnabled) {
                 $("#toggleRepeat").html("<fmt:message key="playlist.repeat_radio"/>");
             } else if (repeatEnabled) {
-                $("#toggleRepeat").html("<fmt:message key="playlist.repeat_on"/>");
+                $("#toggleRepeat").attr('src', '<spring:theme code="repeatOn"/>');
+                $("#toggleRepeat").attr('alt', 'Repeat On');
             } else {
-                $("#toggleRepeat").html("<fmt:message key="playlist.repeat_off"/>");
+                $("#toggleRepeat").attr('src', '<spring:theme code="repeatOff"/>');
+                $("#toggleRepeat").attr('alt', 'Repeat Off');
             }
         }
 
@@ -691,8 +693,8 @@
                     </c:if>
                     <c:if test="${model.player.web}">
                         <td>
-                            <div id="player" style="width:340px; height:40px;padding-right:10px">
+                            <div id="player" style="width:340px; height:40px">
-                                <audio id="audioPlayer" class="mejs__player" data-mejsoptions='{"alwaysShowControls": true, "enableKeyboard": false}' width="340px" height="40px" tabindex="-1" />
+                                <audio id="audioPlayer" class="mejs__player" data-mejsoptions='{"alwaysShowControls": true, "enableKeyboard": false}' width="340px" height"40px" tabindex="-1" />
                             </div>
                             <div id="castPlayer" style="display: none">
                                 <div style="float:left">
@@ -741,21 +743,47 @@
                             <img src="<spring:theme code="backImage"/>" alt="" onclick="onPrevious()" style="cursor:pointer"></span>
                         </td>
                         <td><span class="header">
-                            <img src="<spring:theme code="forwardImage"/>" alt="" onclick="onNext(false)" style="cursor:pointer"></span>
+                            <img src="<spring:theme code="forwardImage"/>" alt="" onclick="onNext(false)" style="cursor:pointer"></span> |
                         </td>
                     </c:if>
 
-                    <td style="white-space:nowrap;"><span class="header"><a href="javascript:onClear()"><fmt:message key="playlist.clear"/></a></span> |</td>
+                    <td style="white-space:nowrap;">
-                    <td style="white-space:nowrap;"><span class="header"><a href="javascript:onShuffle()"><fmt:message key="playlist.shuffle"/></a></span> |</td>
+                      <span class="header">
+                        <a href="javascript:onClear()">
+                            <img src="<spring:theme code="clearImage"/>" alt="Clear playlist" style="cursor:pointer; height:18px">
+                        </a>
+                      </span> |</td>
+
+                    <td style="white-space:nowrap;">
+                      <span class="header">
+                        <a href="javascript:onShuffle()">
+                            <img src="<spring:theme code="shuffleImage"/>" alt="shuffle" style="cursor:pointer; height:18px">
+                        </a>
+                      </span> |</td>
 
                     <c:if test="${model.player.web or model.player.jukebox or model.player.external}">
-                        <td style="white-space:nowrap;"><span class="header"><a href="javascript:onToggleRepeat()"><span id="toggleRepeat"><fmt:message key="playlist.repeat_on"/></span></a></span>  |</td>
+                        <td style="white-space:nowrap;">
+                          <span class="header">
+                            <a href="javascript:onToggleRepeat()">
+                              <img id="toggleRepeat" src="<spring:theme code="repeatOn"/>" alt="repeatOn" style="cursor:pointer; height:18px">
+                            </a>
+                          </span> |</td>
                     </c:if>
 
-                    <td style="white-space:nowrap;"><span class="header"><a href="javascript:onUndo()"><fmt:message key="playlist.undo"/></a></span>  |</td>
+                    <td style="white-space:nowrap;">
+                      <span class="header">
+                        <a href="javascript:onUndo()">
+                          <img src="<spring:theme code="undoImage"/>" alt="undo" style="cursor:pointer; height:18px">
+                        </a>
+                      </span>  |</td>
 
                     <c:if test="${model.user.settingsRole}">
-                        <td style="white-space:nowrap;"><span class="header"><a href="playerSettings.view?id=${model.player.id}" target="main"><fmt:message key="playlist.settings"/></a></span>  |</td>
+                        <td style="white-space:nowrap;">
+                          <span class="header">
+                            <a href="playerSettings.view?id=${model.player.id}" target="main">
+                              <img src="<spring:theme code="settingsImage"/>" alt="Settings" style="cursor:pointer; height:18px">
+                            </a>
+                          </span> |</td>
                     </c:if>
 
                     <td style="white-space:nowrap;"><select id="moreActions" onchange="actionSelected(this.options[selectedIndex].id)">
@@ -802,11 +830,11 @@
         <tr id="pattern" style="display:none;margin:0;padding:0;border:0">
             <td class="fit">
                 <img id="starSong" onclick="onStar(this.id.substring(8) - 1)" src="<spring:theme code="ratingOffImage"/>"
-                     style="cursor:pointer" alt="" title=""></td>
+                     style="cursor:pointer;height:18px;" alt="" title=""></td>
             <td class="fit">
                 <img id="removeSong" onclick="onRemove(this.id.substring(10) - 1)" src="<spring:theme code="removeImage"/>"
-                     style="cursor:pointer" alt="<fmt:message key="playlist.remove"/>" title="<fmt:message key="playlist.remove"/>"></td>
+                     style="cursor:pointer; height:18px;" alt="<fmt:message key="playlist.remove"/>" title="<fmt:message key="playlist.remove"/>"></td>
-            <td class="fit"><input type="checkbox" id="songIndex"></td>
+            <td class="fit"><input type="checkbox" class="checkbox" id="songIndex"></td>
 
             <c:if test="${model.visibility.trackNumberVisible}">
                 <td class="fit rightalign"><span class="detail" id="trackNumber">1</span></td>

airsonic-main/src/main/webapp/WEB-INF/jsp/playlist.jsp

@@ -228,16 +228,16 @@
     <tr id="pattern" style="display:none;margin:0;padding:0;border:0">
         <td class="fit">
             <img id="starSong" onclick="onStar(this.id.substring(8) - 1)" src="<spring:theme code="ratingOffImage"/>"
-                 style="cursor:pointer" alt="" title=""></td>
+                 style="cursor:pointer;height:18px;" alt="" title=""></td>
         <td class="fit">
             <img id="play" src="<spring:theme code="playImage"/>" alt="<fmt:message key="common.play"/>" title="<fmt:message key="common.play"/>"
-                 style="padding-right:0.1em;cursor:pointer" onclick="onPlay(this.id.substring(4) - 1)"></td>
+                 style="padding-right:0.1em;cursor:pointer;height:18px;" onclick="onPlay(this.id.substring(4) - 1)"></td>
         <td class="fit">
             <img id="add" src="<spring:theme code="addImage"/>" alt="<fmt:message key="common.add"/>" title="<fmt:message key="common.add"/>"
-                 style="padding-right:0.1em;cursor:pointer" onclick="onAdd(this.id.substring(3) - 1)"></td>
+                 style="padding-right:0.1em;cursor:pointer;height:18px;" onclick="onAdd(this.id.substring(3) - 1)"></td>
         <td class="fit" style="padding-right:30px">
             <img id="addNext" src="<spring:theme code="addNextImage"/>" alt="<fmt:message key="main.addnext"/>" title="<fmt:message key="main.addnext"/>"
-                 style="padding-right:0.1em;cursor:pointer" onclick="onAddNext(this.id.substring(7) - 1)"></td>
+                 style="padding-right:0.1em;cursor:pointer;height:18px;" onclick="onAddNext(this.id.substring(7) - 1)"></td>
 
         <td class="fit rightalign"><span id="index">1</span></td>
         <td class="fit"><span id="missing" class="playlist-missing"><fmt:message key="playlist.missing"/></span></td>
@@ -249,7 +249,7 @@
         <c:if test="${model.editAllowed}">
             <td class="fit">
                 <img id="removeSong" onclick="onRemove(this.id.substring(10) - 1)" src="<spring:theme code="removeImage"/>"
-                     style="cursor:pointer" alt="<fmt:message key="playlist.remove"/>" title="<fmt:message key="playlist.remove"/>"></td>
+                     style="cursor:pointer;height:18px;" alt="<fmt:message key="playlist.remove"/>" title="<fmt:message key="playlist.remove"/>"></td>
         </c:if>
     </tr>
     </tbody>

airsonic-main/src/main/webapp/WEB-INF/jsp/rating.jsp

@@ -31,10 +31,10 @@ PARAMETERS
 
     <c:choose>
         <c:when test="${param.readonly}">
-            <img src="${imageUrl}" style="margin-right:-3px" alt="" title="<fmt:message key="rating.rating"/> ${param.rating/10}">
+            <img style="height:18px" src="${imageUrl}" style="margin-right:-3px;height:18px;" alt="" title="<fmt:message key="rating.rating"/> ${param.rating/10}">
         </c:when>
         <c:otherwise>
-            <a href="${ratingUrl}"><img src="${imageUrl}" style="margin-right:-3px" alt="" title="<fmt:message key="rating.rating"/> ${i}"></a>
+            <a href="${ratingUrl}"><img src="${imageUrl}" style="margin-right:-3px;height:18px" alt="" title="<fmt:message key="rating.rating"/> ${i}"></a>
         </c:otherwise>
     </c:choose>
 
@@ -47,5 +47,5 @@ PARAMETERS
 </sub:url>
 
 <c:if test="${not param.readonly}">
-    &nbsp;| <a href="${clearRatingUrl}"><img src="<spring:theme code="clearRatingImage"/>" alt="" title="<fmt:message key="rating.clearrating"/>" style="margin-right:5px"></a>
+    &nbsp;| <a href="${clearRatingUrl}"><img src="<spring:theme code="clearRatingImage"/>" alt="" title="<fmt:message key="rating.clearrating"/>" style="margin-right:5px;height:18px"></a>
 </c:if>

airsonic-main/src/main/webapp/WEB-INF/jsp/top.jsp

@@ -81,8 +81,8 @@
 <table style="margin:0;padding-top:5px">
     <tr>
         <td style="padding-right:4.5em;">
-            <img id="show-left-frame" src="<spring:theme code="viewAsListImage"/>" onclick="showLeftFrame()" alt="" style="display:${model.showSideBar ? 'none' : 'inline'};cursor:pointer">
+            <img id="show-left-frame" src="<spring:theme code="sidebarImage"/>" onclick="showLeftFrame()" alt="" style="display:${model.showSideBar ? 'none' : 'inline'};cursor:pointer">
-            <img id="hide-left-frame" src="<spring:theme code="viewAsListImage"/>" onclick="hideLeftFrame()" alt="" style="display:${model.showSideBar ? 'inline' : 'none'};cursor:pointer">
+            <img id="hide-left-frame" src="<spring:theme code="sidebarImage"/>" onclick="hideLeftFrame()" alt="" style="display:${model.showSideBar ? 'inline' : 'none'};cursor:pointer">
         </td>
         <td style="min-width:3em;padding-right:1em;text-align: center">
             <a href="home.view?" target="main"><img src="<spring:theme code="homeImage"/>" title="${home}" alt="${home}"></a>
@@ -133,7 +133,8 @@
 
         <td style="padding-left:15pt;padding-right:5pt;vertical-align: middle;width: 100%;text-align: center">
 
-            <c:if test="${model.showAvatar}">
+          <c:choose>
+            <c:when test="${model.showAvatar}">
             <sub:url value="avatar.view" var="avatarUrl">
                 <sub:param name="username" value="${model.user.username}"/>
             </sub:url>
@@ -142,10 +143,15 @@
                         <img src="${avatarUrl}" alt="" width="30" height="30">
                         <c:if test="${model.user.settingsRole}"></a></c:if>
                 </div>
-            </c:if>
+            </c:when>
+            <c:otherwise>
+            <img src="<spring:theme code="logoutImage"/>" alt="logout" height="24">
+            </c:otherwise>
+          </c:choose>
 
             <div class="detail">
-                <fmt:message key="top.logout" var="logout"><fmt:param value="${model.user.username}"/></fmt:message>
+              <fmt:message key="top.logout" var="logout"><br/>
+              <fmt:param value="${model.user.username}"/></fmt:message>
                 <a href="<c:url value="/logout"/>" target="_top">${fn:escapeXml(logout)}</a>
             </div>
         </td>

airsonic-main/src/main/webapp/icons/default_dark/logout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>

airsonic-main/src/main/webapp/icons/default_dark/sidebar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sidebar"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/add_next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/add_overlay.svg

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="#696969"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="feather feather-plus-circle"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="add_overlay.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="747"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="19.666667"
+     inkscape:cx="18.32376"
+     inkscape:cy="14.036397"
+     inkscape:window-x="0"
+     inkscape:window-y="21"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <circle
+     cx="12"
+     cy="12"
+     r="10"
+     id="circle2"
+     style="fill:#696969;fill-opacity:1" />
+  <line
+     x1="12"
+     y1="8"
+     x2="12"
+     y2="16"
+     id="line4"
+     style="fill:none;fill-opacity:1;stroke:#fffffa;stroke-opacity:1" />
+  <line
+     x1="8"
+     y1="12"
+     x2="16"
+     y2="12"
+     id="line6"
+     style="stroke:#ffffff;stroke-opacity:1" />
+  <ellipse
+     cx="11.942599"
+     cy="12.08386"
+     id="circle2-3"
+     style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:0.93742383;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     rx="11.356136"
+     ry="11.314013" />
+</svg>

airsonic-main/src/main/webapp/icons/default_light/android.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smartphone"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12" y2="18"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/cast_active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cast"><path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path><line x1="2" y1="20" x2="2" y2="20"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/cast_idle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cast"><path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path><line x1="2" y1="20" x2="2" y2="20"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/cast_pause.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>

airsonic-main/src/main/webapp/icons/default_light/chevron.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/clear.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/current.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-right"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/donate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>

airsonic-main/src/main/webapp/icons/default_light/down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/log.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/logout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/mute.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-x"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/now_playing.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>

airsonic-main/src/main/webapp/icons/default_light/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>

airsonic-main/src/main/webapp/icons/default_light/play_overlay.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="#696969"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="feather feather-play-circle"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="play_overlay.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="747"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="22.627417"
+     inkscape:cx="5.7337208"
+     inkscape:cy="12.896295"
+     inkscape:window-x="0"
+     inkscape:window-y="21"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <circle
+     cx="12"
+     cy="12"
+     r="10"
+     id="circle2"
+     style="fill:#696969;fill-opacity:1" />
+  <polygon
+     points="10 8 16 12 10 16 10 8"
+     id="polygon4"
+     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-opacity:1" />
+  <ellipse
+     cx="12"
+     cy="12.002282"
+     id="circle2-3"
+     style="stroke:#ffffff;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     rx="11.00637"
+     ry="11.109817" />
+</svg>

airsonic-main/src/main/webapp/icons/default_light/playlist.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/podcast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-radio"><circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path></svg>

airsonic-main/src/main/webapp/icons/default_light/ratingOff.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>

airsonic-main/src/main/webapp/icons/default_light/ratingOn.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="#696969"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="feather feather-star"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="ratingOn.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="747"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="27.812867"
+     inkscape:cx="13.059223"
+     inkscape:cy="11.018899"
+     inkscape:window-x="0"
+     inkscape:window-y="21"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <polygon
+     points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+     id="polygon2" />
+  <path
+     style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:0.10169491;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 7.2459599,18.872996 C 7.4215182,18.082489 8.0137474,14.360551 8.0146568,14.042025 8.0157012,13.676177 7.9243737,13.56925 6.1221741,11.826291 L 4.2285939,9.9949557 6.7907906,9.6223177 C 8.759632,9.3359755 9.4007844,9.2066389 9.5593822,9.0638229 9.6728995,8.9616016 10.269624,7.8715875 10.885437,6.6415692 l 1.119661,-2.2363968 1.160607,2.3194594 c 1.032511,2.0634592 1.196663,2.3342533 1.487282,2.4534991 0.179671,0.073722 1.392702,0.284451 2.695626,0.4682867 l 2.36895,0.3342469 -1.8859,1.8954175 c -1.14809,1.153884 -1.885864,1.972606 -1.885806,2.092718 5.2e-5,0.108516 0.184332,1.269036 0.409512,2.578933 0.22518,1.309897 0.396749,2.413702 0.381263,2.452901 -0.01549,0.0392 -1.012056,-0.448444 -2.214598,-1.083649 -1.505973,-0.795483 -2.291572,-1.155345 -2.524241,-1.156291 -0.232348,-9.15e-4 -0.899027,0.295935 -2.1355936,0.951001 -0.988786,0.523806 -1.9935518,1.051653 -2.232813,1.172996 l -0.4350202,0.220622 z"
+     id="path4520"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:#696969;fill-opacity:1;stroke:#696969;stroke-width:0.7;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 7.2417149,18.767797 c 0.1494068,-0.735495 0.7718444,-4.598586 0.7718444,-4.790368 0,-0.131303 -0.6897265,-0.899137 -1.9032636,-2.118798 -1.046795,-1.052078 -1.8463046,-1.9128683 -1.7766881,-1.9128683 0.112482,0 4.030691,-0.5671782 4.5443585,-0.6578161 0.3433596,-0.060587 0.6031098,-0.1806992 0.7627119,-0.3526898 0.083898,-0.09041 0.65053,-1.1699481 1.259181,-2.3989723 l 1.106639,-2.2345896 1.130649,2.2990338 c 1.182247,2.4039495 1.280427,2.5355386 1.995056,2.6739287 0.434559,0.084153 4.458231,0.6711053 4.600561,0.6711053 0.05603,0 -0.744081,0.8351693 -1.77802,1.8559323 -1.033939,1.020763 -1.907886,1.937029 -1.942107,2.036147 -0.03422,0.09912 0.121911,1.261015 0.346957,2.58199 0.225046,1.320976 0.395608,2.460575 0.379028,2.532441 -0.01957,0.08481 -0.779676,-0.263581 -2.165741,-0.992642 -1.576884,-0.829431 -2.248665,-1.130853 -2.567796,-1.15215 -0.237712,-0.01586 -0.432204,0.01257 -0.432204,0.06319 0,0.05062 -0.05301,0.09204 -0.117791,0.09204 -0.06478,0 -1.029249,0.480508 -2.1432545,1.067796 -1.1140054,0.587289 -2.0506181,1.067797 -2.0813617,1.067797 -0.030744,0 -0.025685,-0.148729 0.011241,-0.330508 z"
+     id="path4522"
+     inkscape:connector-curvature="0" />
+</svg>

airsonic-main/src/main/webapp/icons/default_light/remove.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/repeat_off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>

airsonic-main/src/main/webapp/icons/default_light/repeat_on.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>

airsonic-main/src/main/webapp/icons/default_light/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>

airsonic-main/src/main/webapp/icons/default_light/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/share_facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>

airsonic-main/src/main/webapp/icons/default_light/share_twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>

airsonic-main/src/main/webapp/icons/default_light/shuffle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shuffle"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/sidebar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sidebar"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/starred.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>

airsonic-main/src/main/webapp/icons/default_light/status.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/undo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>

airsonic-main/src/main/webapp/icons/default_light/up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/upload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/view_as_grid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>

airsonic-main/src/main/webapp/icons/default_light/view_as_list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-justify"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>

airsonic-main/src/main/webapp/icons/default_light/volume.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>

airsonic-main/src/main/webapp/style/buuftheme.css

@@ -60,11 +60,6 @@ table {
     background-image:url( "../icons/buuftheme/back.png" );
 }
 
-/* Forward image */
-.forward {
-    background-image:url( "../icons/buuftheme/forward.png" );
-}
-
 /* Link colour */
 a:link, a:active, a:visited, a:link *, a:active *, a:visited * {
     color: #ffAE00;

airsonic-main/src/main/webapp/style/coolandclean.css

@@ -56,11 +56,6 @@ table {
     background-image:url( "../icons/coolandclean/back.png" );
 }
 
-/* Forward image */
-.forward {
-    background-image:url( "../icons/coolandclean/forward.png" );
-}
-
 /* Link colour */
 a:link, a:active, a:visited, a:link *, a:active *, a:visited * {
     color: #656569;

airsonic-main/src/main/webapp/style/default-without-mediaelement.css

@@ -374,8 +374,14 @@ img {
     background-image:url("../icons/default_light/back.png");
 }
 
-.forward {
+.forward:before {
-    background-image:url("../icons/default_light/forward.png");
+    background-image:url("../icons/default_light/chevron.svg");
+    background-size: 16px 16px;
+    width: 16px;
+    height: 16px;
+    content: "";
+    display: inline-block;
+    vertical-align: -20%;
 }
 
 .albumComment {

airsonic-main/src/main/webapp/style/denim.css

@@ -53,11 +53,6 @@ table {
     background-image:url( "../icons/denim/back.png" );
 }
 
-/* Forward image */
-.forward {
-    background-image:url( "../icons/denim/forward.png" );
-}
-
 
 /* Link colour */
 a:link, a:active, a:visited, a:link *, a:active *, a:visited * {

airsonic-main/src/main/webapp/style/groove.css

@@ -66,11 +66,6 @@ table {
     background-image:url( "../icons/groove/back.png" );
 }
 
-/* Forward image */
-.forward {
-    background-image:url( "../icons/groove/forward.png" );
-}
-
 
 /* Link colour */
 a:link, a:active, a:visited, a:link *, a:active *, a:visited * {

airsonic-main/src/main/webapp/style/groove_simple.css

@@ -26,7 +26,3 @@
     background-image:url( "../icons/groove/back.png" );
 }
 
-/* Forward image */
-.forward {
-    background-image:url( "../icons/groove/forward.png" );
-}

airsonic-main/src/main/webapp/style/midnight.css

@@ -67,6 +67,3 @@ body {
 .back {
     background-image:url("../icons/default_dark/back.png");
 }
-.forward {
-    background-image:url("../icons/default_dark/forward.png");
-}

airsonic-main/src/main/webapp/style/midnightfun.css

@@ -49,11 +49,6 @@ table {
     background-image:url("../icons/midnightfun/midnightfun_back.png");
 }
 
-/* Forward image */
-.forward {
-    background-image:url("../icons/midnightfun/midnightfun_forward.png");
-}
-
 /* Link colour */
 a:link, a:active, a:visited, a:link *, a:active *, a:visited * {
     color: #656569;

airsonic-main/src/main/webapp/style/monochrome_black.css

@@ -31,11 +31,6 @@ h2, b, tr {
     background-image:url("../icons/default_dark/back.png");
 }
 
-.forward {
-    background-image:url("../icons/default_dark/forward.png");
-}
-
-/* Table sizing */
 table {
     margin: 0 0 0 0;
 }

airsonic-main/src/main/webapp/style/pinkpanther.css

@@ -53,11 +53,6 @@ table {
     background-image:url( "../icons/pinkpanther/back.png" );
 }
 
-/* Forward image */
-.forward {
-    background-image:url( "../icons/pinkpanther/forward.png" );
-}
-
 
 /* Link colour */
 a:link, a:active, a:visited, a:link *, a:active *, a:visited * {

airsonic-main/src/main/webapp/style/simplify.css

@@ -53,11 +53,6 @@ table {
     background-image:url( "../icons/simplify/back.png" );
 }
 
-/* Forward image */
-.forward {
-    background-image:url( "../icons/simplify/forward.png" );
-}
-
 
 /* Link colour */
 a:link, a:active, a:visited, a:link *, a:active *, a:visited * {

airsonic-main/src/main/webapp/style/sonic.css

@@ -57,11 +57,6 @@ table {
     background-image:url( "../icons/sonic/back.png" );
 }
 
-/* Forward image */
-.forward {
-    background-image:url( "../icons/sonic/forward.png" );
-}
-
 
 /* Link colour */
 a:link, a:active, a:visited, a:link *, a:active *, a:visited * {

airsonic-main/src/main/webapp/style/sonic_blue.css

@@ -51,11 +51,6 @@ h2, b, tr {
     background-image:url( "../icons/sonic_blue/back.png" );
 }
 
-/* Forward image */
-.forward {
-    background-image:url( "../icons/sonic_blue/forward.png" );
-}
-
 
 /* Link colour */
 a:link, a:active, a:visited, a:link *, a:active *, a:visited * {

airsonic-main/src/main/webapp/style/sonic_white.css

@@ -52,11 +52,6 @@ h2, b, tr {
     background-image:url( "../icons/sonic_white/back.png" );
 }
 
-/* Forward image */
-.forward {
-    background-image:url( "../icons/sonic_white/forward.png" );
-}
-
 
 /* Link colour */
 a:link, a:active, a:visited, a:link *, a:active *, a:visited * {

airsonic-main/src/main/webapp/style/subStandard.css

@@ -54,11 +54,6 @@ table {
     background-image:url( "../icons/subStandard/back.png" );
 }
 
-/* Forward image. */
-.forward {
-    background-image:url( "../icons/subStandard/forward.png" );
-}
-
 /* Links. */
 a:link, a:active, a:visited, a:link *, a:active *, a:visited * {
     color: #FFFFFF;