Svg image loses styling once deployed on browser

JavaScript
#1

I’m using an svg image as an icon, while in local host its size is 18 X 18, when I deploy the index.html to my actual website, its size becomes 0 X 18

Size in local host : original

Size in browser: browser

I have tried using a .png instead of a .svg but face similar problem.

I have realized that the styling disappears once deployed

Styling in localhost: has width

Styling in browser: had to add width

This is where its rendered:

        <IconButton
          showTooltip={showTooltip}
          tabIndex={this.props.tabIndex}
          tooltipText={this.props.localization.feedbackIconTooltip}
          description={this.props.localization.feedbackIconDescription}
          className={styles.headerIcon}
          onClick={this.onClickFeedback}
          onTouchStart={this.onClickFeedback}
          icon={feedbackIcon} //icon imported from assets
          color={this.props.iconColor}
          size={this.props.iconSize}
        />

Is it possible to ensure the width doesn’t disappear?