title: How do I force MVC4/Razor to render a tag inside a SelectListItem?
body: <p>I can have tags inside option tags, and it works (don't know if it's valid HTML4/5, but it works in Firefox at least):</p>
  
  <pre><code>&lt;select&gt;
    &lt;option&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;Add item&lt;/option&gt;
    &lt;option&gt;&lt;i class="icon-remove"&gt;&lt;/i&gt;Remove item&lt;/option&gt;
    &lt;option&gt;&lt;i class="icon-edit"&gt;&lt;/i&gt;Edit item&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I'm placing Bootstrap/FontAwesome webfont icons in those option tags.</p>
  
  <p>But I'm using MVC4/Razor, and I can't get the correct syntax to make it render properly. It encodes all those inner tags and I get <code>&amp;lt;</code>, <code>&amp;gt;</code>, etc.</p>
  
  <p>This is what I'm doing:</p>
  
  <pre><code>// first I make a new list with the icons inside
  var items = Model.Items.Select(q =&gt; new SelectListItem() {
    Selected = q.Selected,
    Text = "&lt;i class=\"icon-add\"&gt;&lt;/i&gt;" + q.Text,
    Value = q.Value
    });
  // then render the dropdown
  Html.DropDownListFor(m =&gt; m.SelectedItem, items, "All")
  </code></pre>
  
  <p>How do I get this working?</p>