[List] list icon in "ui list" context has wrong padding

[mguentner]

Steps

1. Use <div class="ui list"> or <div class="list">
2. Use <i class="list icon"></i> for an item

Expected Result

list icon has same padding / offset as others

Actual Result

list icon has weird padding / offset

Version

2.3.1

Testcase

https://jsfiddle.net/8prnh2ym/

[iHaPBoy]

list alternate outline icon has the same problem.

[merowinger92]

https://jsfiddle.net/etx57bur/7/

[laliluna]

The reason for the problem is a collision between class name "list" with a icon named "list".
The approach to fix this by making the list selector more specific (#6510) fixes this only for the current situation. We could run into random collisions in the future when new icons appear in font awesome.
An alternative is to prefix icons in general, which would solve this once and for all. This carries the trade off that we would probably need to support both icon class names for a while.

<i class="ui-list icon"> instead of <i class="list icon">