Search code examples
cssreactjstypescriptionic-frameworkionic4

Ionic (React) IonIcon - Unable to align to the center

I am trying to align the icon to the center in Ionic (React). But the icon sticks to the left as shown in the screenshot:

Issue Screenshot

TSX code:

type WalletBtnProps = {
  icon: { ios: string; md: string };
  label: string;
};

class WalletBtn extends React.Component<WalletBtnProps> {
  render() {
    return (
      <div className="wallet-button ion-text-center">
        <IonIcon icon={this.props.icon} />
        <IonLabel>{this.props.label}</IonLabel>
      </div>
    );
  }
}

CSS:

.wallet-button {
  width: 100%;
  text-align: center;
  height: auto;
  background: rgba(190, 164, 164, 0.2);
  border-radius: 10px;
  padding: 15px;
}
.wallet-button * {
  display: block !important;
}
.wallet-button ion-icon {
  font-size: 64px;
}

Any suggestions on how to fix this issue?

Solution

  • In the icon class add these css :

    width:100%;
display:flex;
align-items:center;
justify-content:center;

    And these should solve your problem.