ホバー上のGoogleマテリアルアイコンをhtml/cssのみに変更

Question

ボタンホバーのGoogle Material Icon（実際のアイコン自体）を変更したいと思います。私はHTMLとCSSでこれをやりたいと思います。 「プラス」アイコンから「チェック」アイコン、具体的には「完了」アイコンを使用するようにしたいと思います。以下のCodepen。おかげ

.material-icons.md1 { 
    font-family: 'Material Icons'; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 33px; 
    margin-top: 12px; 
} 
.btnwrap { 
    position: fixed; 
    z-index: 2; 
    height: 60px; 
    width: 300px; 
    background-color: #074fb2; 
    font-size: 20px; 
    display: block; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 60px; 
    color: #fff; 
    border-radius: 50px; 
    cursor: pointer; 
} 
.btntext1 { 
    position: absolute; 
    left:85px; 
    transition: all .1s; 
} 
.btntext2 { 
    position: absolute; 
    width: 100%; 
    transition: all .2s; 
    opacity: 0; 
} 
.innerbtn { 
    z-index: 1; 
    position: relative; 
    float: left; 
    height: 56px; 
    width: 56px; 
    background-color: #3e81dc; 
    border-radius: 50px; 
    display: inline-block; 
    margin-top: 2px; 
    margin-left:2px; 
    transition: all 1s; 
} 
.btnwrap:hover .btntext1 { 
    opacity: 0; 
    transition: all .5s; 
} 
.btnwrap:hover .btntext2 { 
    opacity: 1; 
    transition: all .5s; 
} 
.btnwrap:hover .innerbtn { 
    margin-left: 242px; 
} 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
    rel="stylesheet"> 
<div id="button1" class="btnwrap" title="download_btn"> 
<div class="innerbtn"><i class="material-icons md1">add</i></div> 
<div class="btntext2">Click Now</div> 
<div class="btntext1">Download for FREE</div> 
</div> 

https://codepen.io/anon/pen/YYEXYy

Answer 1

ので、イムここで自分の質問に答える...と「コンテンツ」を追加し、空のhtmlを残す「：前に」CSSで、その後、それを変更「：前」と..状態をホバーフォークCodepenを参照してください。

<i class="material-icons md1" style="margin-top: 12px;"></i></div> 

.material-icons.md1::before{ 
    font-family: 'Material Icons'; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 33px; 
    content:"add"; 
} 

.btnwrap:hover .material-icons.md1::before{ 
    content:"done"; 
} 

https://codepen.io/anon/pen/aEVOEr