title: how to change the css of angular material checkbox of mat-checkbox in an angular component
body: <p>I work on an angular 10 application.</p>
  <p>I have a component having a template containing an angular material mat-checkbox. Inspecting the browser page, the checkbox has the following class</p>
  <pre><code>.mat-checkbox-inner-container {
      display: inline-block;
      height: 16px;
      line-height: 0;
      margin: auto;
          margin-right: auto;
          margin-left: auto;
      margin-right: 8px;
      order: 0;
      position: relative;
      vertical-align: middle;
      white-space: nowrap;
      width: 16px;
      flex-shrink: 0;
  }
  </code></pre>
  <p>I want to move the checkbox 5px down. My component has its proper scss file in which I apply the following class</p>
  <pre><code>  .mat-checkbox-inner-container {
      top: 5px !important;
    }
  </code></pre>
  <p>But it does not work. How can this be done and at the same time, if you can give me a detail explanation, thank you.</p>
  <p>When I add manually the &quot;top: 5px !important;&quot; property in .mat-checkbox-inner-container class in the browser , it works.</p>