Button with text and icon in the middle

					
<div className="bnt-scan-container">
  <button onClick={this.props.onClick} type={this.props.type} disabled={this.props.isDisabled}>
  <span>{this.props.text}</span>
  <span className={'btn-scan-icon ' + this.props.scanButtonIcon} />                 
  </button>
</div>				

					
SCSS Style:
div {
  .bnt-scan-container {
    display: flex;
    justify-content: center; 
    
    button {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;    
      font-size: 15px;
      background-color: $navy-blue;
      color: $white;
      font-weight: bold;
      text-transform: uppercase;
      border: none;
      border-radius: 8px;
      padding: 5px;
      margin: 15px;
      height: 55px;
      cursor: pointer;
      outline: none;  
      flex-grow: 1;
      justify-content: center;
          
      span {
        align-self: center;
        &.btn-text {
          font-size: 20px;
          flex-grow: 0;
        }
        &.btn-scan-icon {
            font-size: 26px;
          padding-left: 5px;
          padding-right: 5px;
          margin-left: 6px;
          flex-grow: 0;
        }
      }
    }
  }
}