Change the SVG label icon in a CSS dropdown menu - html

Question

I found on CodePen a CSS dropdown menu, a checkbox solution that I liked. I adapted it a little to my needs, excepting that I can't figure out how to hide the close icon when the menu is closed. I know about existing solutions, for example like here, but I can't solve it in my case. Any suggestion?
SOLVED (see below code)
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
input#toggle-menu{
display: none;
}
#search-toggle {
position: relative;
border-bottom: 4px solid tomato;
perspective: 1000px;
}
.header-inner-wrapper{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px;
height: 80px;
}
#searchform{
display: flex;
flex-direction: column;
text-align: center;
position: absolute;
top: 84px;
left: 0;
width: 100%;
transform: scaleY(0);
transition: all 0.3s ease;
transform-origin: 50% top;
}
#header-inner-wrapper label{
cursor: pointer;
position: relative;
width: 60px;
height: 30px;
font-size: 0;
margin-top: -18px;
}
input#toggle-menu ~ #searchform {
/* transform: scaleY(0); */
animation: nav-out 1s ease-in-out normal forwards;
}
input#toggle-menu:checked ~ #searchform {
/* transform: scaleY(1); */
animation: nav-in 1s ease-in-out normal forwards;
}
#keyframes nav-in {
0%{
transform-origin: 50% top;
transform: scaleY(0);
}
50%{
transform: scaleY(1.3);
}
80%{
transform: scaleY(0.9);
}
90%{
transform: scaleY(1.05);
}
100%{
transform: scaleY(1);
}
}
#keyframes nav-out {
0%{
transform-origin: left center;
transform: scaleY(1);
}
50%, 60%{
transform: translateX(-10%) rotateY(0);
}
80%{
transform: translateX(100%);
}
99.9%{
transform: translateX(100%) scaleX(1);
}
100%{
transform: translateX(100%) scaleX(0);
opacity: 1;
/* transform: translateX(100%) rotateY(-90deg); */
/* transform: translateX(0%) rotateY(60deg) scaleX(0.2) ;
opacity: 0; */
}
}
input#toggle-menu:checked ~ #header-inner-wrapper #iconsearch {
display: none;
}
input#toggle-menu:not(:checked) ~ #header-inner-wrapper #iconclose {
display: none;
}
<div id="search-toggle" class="float-left">
<input type="checkbox" id="toggle-menu">
<div id="header-inner-wrapper" class="header-inner-wrapper">
<label id="iconsearch" for="toggle-menu">
<svg id="icon icon-search" viewBox="0 0 30 32">
<path class="path1" d="M20.571 14.857q0-3.304-2.348-5.652t-5.652-2.348-5.652 2.348-2.348 5.652 2.348 5.652 5.652 2.348 5.652-2.348 2.348-5.652zM29.714 29.714q0 0.929-0.679 1.607t-1.607 0.679q-0.964 0-1.607-0.679l-6.125-6.107q-3.196 2.214-7.125 2.214-2.554 0-4.884-0.991t-4.018-2.679-2.679-4.018-0.991-4.884 0.991-4.884 2.679-4.018 4.018-2.679 4.884-0.991 4.884 0.991 4.018 2.679 2.679 4.018 0.991 4.884q0 3.929-2.214 7.125l6.125 6.125q0.661 0.661 0.661 1.607z"></path>
</svg>
</label>
<label id="iconclose" for="toggle-menu">
<svg id="icon icon-close" viewBox="0 0 25 32">
<path class="path1" d="M23.179 23.607q0 0.714-0.5 1.214l-2.429 2.429q-0.5 0.5-1.214 0.5t-1.214-0.5l-5.25-5.25-5.25 5.25q-0.5 0.5-1.214 0.5t-1.214-0.5l-2.429-2.429q-0.5-0.5-0.5-1.214t0.5-1.214l5.25-5.25-5.25-5.25q-0.5-0.5-0.5-1.214t0.5-1.214l2.429-2.429q0.5-0.5 1.214-0.5t1.214 0.5l5.25 5.25 5.25-5.25q0.5-0.5 1.214-0.5t1.214 0.5l2.429 2.429q0.5 0.5 0.5 1.214t-0.5 1.214l-5.25 5.25 5.25 5.25q0.5 0.5 0.5 1.214z"></path>
</svg>
</label>
</div>
<div id="searchform">
<form role="search" method="get" class="search-form" action="https://example.com">
<textarea>Here will be a search form</textarea>
</form>
</div>
</div>