title: Center the center of an Angular Material icon
body: <p>I am trying to center an Angular Material icon in a rectangle:</p>
  <p><a href="https://i.stack.imgur.com/oFf7Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oFf7Q.png" alt="enter image description here" /></a></p>
  <p>As shown in the picture, the icon is (more or less) centered; however, it's actually somewhat off center. I think (but admittedly can't prove) that what's happening is that the icon's edge is centered (rather than the center of the icon being centered), which gives the icon an &quot;off-center&quot; look. I'd like to be able to center the center of the icon, but all the references I've found so far are how to center the whole icon (which is what I'm already doing).</p>
  <p>One thing I thought of doing is calculating the absolute (or relative) position somewhere in code, but I would strongly prefer <em>not</em> to do that if I can avoid it because this seems like a &quot;fragile&quot; and labor-intensive way of doing it.</p>
  <p>My template is as follows:</p>
  <pre><code>&lt;div
      class=&quot;rectangle&quot;
      (click)=&quot;clicked(item)&quot;
      [style.backgroundColor]=&quot;item.color&quot;
      *ngIf=&quot;item.itemType == allEnumTypes.ClickButton&quot;
      title=&quot;{{ item.warning }}&quot;
    &gt;
      &lt;mat-icon
        *ngIf=&quot;item.icon&quot;
        fontIcon=&quot;{{ item.icon }}&quot;
        [style.color]=&quot;item.iconColor&quot;
        class=&quot;large-icon&quot;
        style=&quot;padding-top: 20%; padding-right: 30%&quot;
      &gt;&lt;/mat-icon&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;span class=&quot;select-button-text&quot; [style.color]=&quot;item.fontColor&quot; style=&quot;padding-bottom: 0%&quot;&gt;{{ item.display }}&lt;/span&gt;
    &lt;/div&gt;
  </code></pre>
  <p>The CSS for the rectangle class is:</p>
  <pre><code>.rectangle {
    width: 139px;
    height: 125px;
    border: 2px solid #bfc0c2;
    opacity: 1;
    text-align: center !important;
    background: #ffffff 0% 0% no-repeat padding-box;
  }
  </code></pre>
  <p>Can someone point out my mistake here?</p>