Should I use multiple icon for two states of toggle button


I have a simple bar chart component and I’m going to add a button which help user able to switch between two view modes. Let say:

  • First mode called “relative view” (show percentage value of each column).
  • Second mode called “absolute view” (so actually number value of each column).

The button to toggle-like, but I want the UI is just a simple button, not using the switch. Default is “absolute view”.

I have two questions:

  • Should I use two different icons for each state according the current view mode? For example, one “number” icon, and one “%” icon.
  • If I use two different icons, the icon should be show according the “current state” or “next state”?

For second question, for example if I am currently in “absolute view”, should it be displayed “number” icon or “%” icon? Each way has its meaning I think:

  • If I use icon for next state, that mean I taught user: click to change to next state.
  • If I use icon for current state, that mean I taught user: this is the current state, click to toggle.

This thing makes a little considering. Any help should be highly appreciated. Thanks.