Using Custom Icons for HTML buttons

Question

I am building a mobile app using IONIC 2, and have the following group of buttons. Three of them use the standard Ionicons resources. The third one however, uses a custom image of a key, but as you can see, it isn't scaled appropriately.

Here is my code:

scss:

  .buttons .key { 
      background-color: #de574b;       
      transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -o-transform:rotate(45deg); 
  }

  .ion-ios-key::before, .ion-md-key::before {
      max-height: 20px;
      align-content: center;
      vertical-align: center;
      content: url('../../img/Key.png');
    }

html:

 <div class="buttons">
      <button class="bluetooth">
        <ion-icon name="bluetooth"></ion-icon>
      </button>

      <button class="help">
        <ion-icon name="md-help"></ion-icon>
      </button>

      <button class="key">
        <ion-icon name="key"></ion-icon>
      </button>

      <button class="new" (click)="newDevice()">
        <ion-icon name="md-add"></ion-icon>
      </button>
  </div>

My max-height property doesn't do anything, and nor does a height property. How can I style this icon to fit so that is looks like the other icons?

Answer 1

align-content only works with display: flex,flex-direction: column, and flex-flow: row wrap (under specific circumstances).

Try:

.ion-ios-key, .ion-md-key {
      line-height: 20px;
      vertical-align: center;
      background: url('../../img/Key.png')no-repeat;
      background-size: contain;
    }

Remove:

.ion-ios-key::before, .ion-md-key::before {
      max-height: 20px;
      align-content: center;
      vertical-align: center;
      content: url('../../img/Key.png');
    }

background-size: contain; will center the image automatically and expand it enough to maintain it's aspect ratio (ie max width and height without deforming), plus no clipping like what you experience with the original code. If you are not satisfied with it's position, use background-position: center or background-position: 45% 45%*

*45% 45% is just an arbitrary value used as an example.