Html 使用css通过复选框更改跨度中的材质图标

我有一些复选框，这些复选框在跨度中有材质图标。我希望材质图标与选中和未选中的图标不同。我自己试了一些，但没用

    <input type="checkbox" id="main_assessment" name="main_assessment"/>
    <span class="label-text">
    <span style="font-size:1.2em;padding-right:10px;text-transform:none;"><strong>Main Assessment</strong></span>
    <span style="color:#8c8c8c;"><i class="material-icons">print_disabled</i></span>
    </span>

解决办法是什么？提前感谢：）

像这样吗

正文{
字体系列：“开放式Sans”、Arial、Sans serif；
字体大小：14px；
线高：20px；
}
/*复选框*/
标签{
光标：指针；
显示：内联块；
位置：相对位置；
左填充：25px；/*10px右填充+15px输入类型*/
右边距：10px；/*输入类型之间的边距*/
}
标签：在{
内容：“；
宽度：15px；
高度：15px；
位置：绝对位置；
左：0；
}
输入[类型=复选框]{
显示：无；
}
.复选框标签：在{
背景：url（'http://i3.photobucket.com/albums/e22/lilsq3/checkbox_small.png左中不重复；
边缘顶部：2倍；
}
输入[类型=复选框]：选中+标签：在{
背景：url（'http://i36.photobucket.com/albums/e22/lilsq3/checkbox_selected_small.png左中不重复；
}

复选框一


复选框二

像这样吗

正文{
字体系列：“开放式Sans”、Arial、Sans serif；
字体大小：14px；
线高：20px；
}
/*复选框*/
标签{
光标：指针；
显示：内联块；
位置：相对位置；
左填充：25px；/*10px右填充+15px输入类型*/
右边距：10px；/*输入类型之间的边距*/
}
标签：在{
内容：“；
宽度：15px；
高度：15px；
位置：绝对位置；
左：0；
}
输入[类型=复选框]{
显示：无；
}
.复选框标签：在{
背景：url（'http://i3.photobucket.com/albums/e22/lilsq3/checkbox_small.png左中不重复；
边缘顶部：2倍；
}
输入[类型=复选框]：选中+标签：在{
背景：url（'http://i36.photobucket.com/albums/e22/lilsq3/checkbox_selected_small.png左中不重复；
}

复选框一


复选框二

    :checked + span + span + i .material-icons::before{
    content:"print";
    }