HTMLのli要素でアイコンフォントを使って、かつ改行時にインデントを揃えるCSS

アイコンフォントを使って li 要素の list-style をカッコよくします。 li要素の list-style でアイコンフォントを一覧の頭に表示するには、以下のように擬似要素を使ってできます。 この例では Material Icons アイコンフォントを使っています。

ul {
    list-style: none;

    li {
        &:before {
            font-family: 'Material Icons' sans-serif;
            content: 'check_circle';
    }
}

font-family と content を指定して <i class="material-icons">check_circle</i> と同じように表示させられました。

でもこうすると、改行のときに文字がアイコンの左側に行ってしまいます。

ささいなことですが、こういうところを手抜きすると一気にダサくなるので調子したいです。 以下のように li 要素にスタイルを追加するとうまくインデントします。

ul {
    list-style: none;

    li {
        text-indent: -1em;
        padding-left: 1em;

        &:before {
            font-family: 'Material Icons' sans-serif;
            content: 'check_circle';
    }
}

キレイにまとまりました。 やったー。