Semantic Ui top aligned header icon

Semantic Ui top aligned header icon

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<p>

</p>
<h2 class="ui aligned header">
  <i class="setting icon"></i>
  <div class="content">
    Header <div class="sub header">Your text here.</div>
  </div>
</h2>

<h2 class="ui header">
  <i class="setting icon"></i>
  <div class="content">
    Header <div class="sub header">Your text here.</div>
  </div>
</h2>

CSS

.ui.header[class*="top aligned"] .icon {
  vertical-align: top !important;
  padding-top:0 !important;
}