How to change svg color without changing box-shadow color

Question

I have the following snippet, when I hover, I have a blue left shadow which I want to keep that color.

 ul { list-style: none; } a{ text-decoration: none; } #app-navigation:not(.vue) > ul > li > a, #app-navigation:not(.vue) > ul > li > ul > li > a { background-size: 16px 16px; background-position: 14px center; background-repeat: no-repeat; display: block; justify-content: space-between; line-height: 44px; min-height: 44px; padding: 0 12px 0 44px; overflow: hidden; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; color: black; opacity: 0.57; flex: 1 1 0px; z-index: 100; }.nav-icon-files { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiB2ZXJzaW9uPSIxLjEiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Im0xLjUgMmMtMC4yNSAwLTAuNSAwLjI1LTAuNSAwLjV2MTFjMCAwLjI2IDAuMjQgMC41IDAuNSAwLjVoMTNjMC4yNiAwIDAuNS0wLjI0MSAwLjUtMC41di05YzAtMC4yNS0wLjI1LTAuNS0wLjUtMC41aC02LjVsLTItMnoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K); } #app-navigation:not(.vue) > ul > li.active, #app-navigation:not(.vue) > ul > li a:hover, #app-navigation:not(.vue) > ul > li a:focus, #app-navigation:not(.vue) > ul > li a:active, #app-navigation:not(.vue) > ul > li a.selected, #app-navigation:not(.vue) > ul > li a.active, #app-navigation:not(.vue) > ul > li.active > a, #app-navigation:not(.vue) > ul > li a:hover > a, #app-navigation:not(.vue) > ul > li a:focus > a, #app-navigation:not(.vue) > ul > li a:active > a, #app-navigation:not(.vue) > ul > li a.selected > a, #app-navigation:not(.vue) > ul > li a.active > a { opacity: 1; box-shadow: inset 4px 0 blue; } body{ background: #1e272e; }

 <div id="app-navigation"> <ul class="with-icon"> <li data-id="files" class="nav-files"> <a href="#" class="nav-icon-files svg">Files</a> </li> </ul> </div>

Here is how I change the svg color:

 ul { list-style: none; } a{ text-decoration: none; } #app-navigation:not(.vue) > ul > li > a, #app-navigation:not(.vue) > ul > li > ul > li > a { background-size: 16px 16px; background-position: 14px center; background-repeat: no-repeat; display: block; justify-content: space-between; line-height: 44px; min-height: 44px; padding: 0 12px 0 44px; overflow: hidden; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; color: black; opacity: 0.57; flex: 1 1 0px; z-index: 100; }.nav-icon-files { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiB2ZXJzaW9uPSIxLjEiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Im0xLjUgMmMtMC4yNSAwLTAuNSAwLjI1LTAuNSAwLjV2MTFjMCAwLjI2IDAuMjQgMC41IDAuNSAwLjVoMTNjMC4yNiAwIDAuNS0wLjI0MSAwLjUtMC41di05YzAtMC4yNS0wLjI1LTAuNS0wLjUtMC41aC02LjVsLTItMnoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K); } #app-navigation:not(.vue) > ul > li.active, #app-navigation:not(.vue) > ul > li a:hover, #app-navigation:not(.vue) > ul > li a:focus, #app-navigation:not(.vue) > ul > li a:active, #app-navigation:not(.vue) > ul > li a.selected, #app-navigation:not(.vue) > ul > li a.active, #app-navigation:not(.vue) > ul > li.active > a, #app-navigation:not(.vue) > ul > li a:hover > a, #app-navigation:not(.vue) > ul > li a:focus > a, #app-navigation:not(.vue) > ul > li a:active > a, #app-navigation:not(.vue) > ul > li a.selected > a, #app-navigation:not(.vue) > ul > li a.active > a { opacity: 1; box-shadow: inset 4px 0 blue; } body{ background: #1e272e; } /* CUSTOM */.nav-icon-files{ filter: invert(72%) sepia(3%) saturate(75%) hue-rotate(22deg) brightness(80%) contrast(91%); }

 <div id="app-navigation"> <ul class="with-icon"> <li data-id="files" class="nav-files"> <a href="#" class="nav-icon-files svg">Files</a> </li> </ul> </div>

Now my icon color changed but also my box-shadow . How can I keep the original color?

EDIT:

.nav-icon-files:before{
    filter: invert(72%) sepia(3%) saturate(75%) hue-rotate(22deg) brightness(80%) contrast(91%);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiB2ZXJzaW9uPSIxLjEiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Im0xLjUgMmMtMC4yNSAwLTAuNSAwLjI1LTAuNSAwLjV2MTFjMCAwLjI2IDAuMjQgMC41IDAuNSAwLjVoMTNjMC4yNiAwIDAuNS0wLjI0MSAwLjUtMC41di05YzAtMC4yNS0wLjI1LTAuNS0wLjUtMC41aC02LjVsLTItMnoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K);
}

Answer 1

Adjust your code a little and use pseudo element instead of background

 ul { list-style: none; } a{ text-decoration: none; } #app-navigation:not(.vue) > ul > li > a, #app-navigation:not(.vue) > ul > li > ul > li > a { background-size: 16px 16px; background-position: 14px center; background-repeat: no-repeat; display: block; justify-content: space-between; line-height: 44px; min-height: 44px; padding: 0 12px 0 28px; overflow: hidden; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; color: black; opacity: 0.57; flex: 1 1 0px; z-index: 100; color:#fff; }.nav-icon-files:before { content:""; display:inline-block; width:16px; height:16px; margin-right:5px; vertical-align:text-bottom; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiB2ZXJzaW9uPSIxLjEiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Im0xLjUgMmMtMC4yNSAwLTAuNSAwLjI1LTAuNSAwLjV2MTFjMCAwLjI2IDAuMjQgMC41IDAuNSAwLjVoMTNjMC4yNiAwIDAuNS0wLjI0MSAwLjUtMC41di05YzAtMC4yNS0wLjI1LTAuNS0wLjUtMC41aC02LjVsLTItMnoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K); } #app-navigation:not(.vue) > ul > li.active, #app-navigation:not(.vue) > ul > li a:hover, #app-navigation:not(.vue) > ul > li a:focus, #app-navigation:not(.vue) > ul > li a:active, #app-navigation:not(.vue) > ul > li a.selected, #app-navigation:not(.vue) > ul > li a.active, #app-navigation:not(.vue) > ul > li.active > a, #app-navigation:not(.vue) > ul > li a:hover > a, #app-navigation:not(.vue) > ul > li a:focus > a, #app-navigation:not(.vue) > ul > li a:active > a, #app-navigation:not(.vue) > ul > li a.selected > a, #app-navigation:not(.vue) > ul > li a.active > a { opacity: 1; box-shadow: inset 4px 0 blue; } body{ background: #1e272e; } /* CUSTOM */.nav-icon-files:before{ filter: invert(72%) sepia(3%) saturate(75%) hue-rotate(22deg) brightness(80%) contrast(91%); }

 <div id="app-navigation"> <ul class="with-icon"> <li data-id="files" class="nav-files"> <a href="#" class="nav-icon-files svg">Files</a> </li> </ul> </div>