Using Custom Icons For Html Buttons

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

Solution 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.