Replace higcharts export icon

Replace highcharts hambuger menu icon with custom icon

by CHRIS ROBBINS

HTML

<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>
<h1>Replace Highcharts Hamburger</h1>
<nav id="primary_nav_wrap">
  <ul>

    <li class="right">
      <a href="#"><img src="http://i.imgur.com/0iLjc9h.png" alt=""></a>
      <ul>
        <li><a id="print" href="#">Print</a></li>
        <li><a id="png" href="#">download png</a></li>
        <li><a id="jpeg" href="#">download jpeg</a></li>
        <li><a id="pdf" href="#">download pdf</a></li>
        <li><a id="svg" href="#">download svg</a></li>
          <ul>
</nav>
<div id="percent" class="tabcontent">

</div>

CSS

body {
  text-align: center;
  margin: 0 auto;
}
h1 {
  text-align: left;
  margin-left: 15px;
  
}
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: right;
  top: -78px;
  right: 20px;
  padding: 0;
  z-index: 9999;
}

#primary_nav_wrap ul a {
  display: block;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 32px;
  padding: 0 15px;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;

}



#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 80%;
  left: -65px;
  padding: 0;


}

#primary_nav_wrap ul ul li {
  float: none;
  width: 120px;
  border: 1px solid #333;
  z-index: 9999;
      background-color: #fff;


}

#primary_nav_wrap ul ul li:hover,
#primary_nav_wrap ul ul li a:hover {
  background-color: #333;
  color: #fff;
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px;
}


#primary_nav_wrap ul li:hover > ul {
  display: block
}

//highcharts styles
text {
  color: #8F8F8F;
  fill: #8F8F8F;
  opacity: .9;
}

.highcharts-tooltip-box {
  stroke: #D2D2D2;
  stroke-width: 1;
  font-family: 'Whitney-Book',
  fill: #fafafa;
  fill-opacity: 1;
}
.highcharts-tooltip text {
  font-family: 'Whitney-Book',
  fill-
}

/* Link the series colors to axis colors */
.highcharts-color-0 {
    fill: #7C9FAA ;

}

.highcharts-axis.highcharts-color-0 {
    fill: #7cb5ec ;
}
.highcharts-color-1 {
    fill: #C6917D ;

}


.highcharts-yaxis .highcharts-axis-line {
    stroke-width: 0;

}
.highcharts-axis-labels {
  font-size: 20px;
  fill: #8F8F8F;
  font-family: 'Whitney-Book';


}
path.highcharts-axis-line {
  stroke-width: 0;
  fill: #D2D2D2;
  opacity: .3;
}
text.highcharts-title {
  font-family: 'Publico Headline';
  font-weight: bold;
  font-size: 28px;
  fill: #444444;

}

.highcharts-legend-item text {
  font-family: 'Whitney-Book';
  font-size:...

JavaScript

//customize your html with these export options from the highcharts docs
$('#print').click(function() {
    chart.print();
  });

  $('#pdf').click(function() {
    chart.exportChart({
      type: 'application/pdf',
      filename: 'my-pdf'
    });
  });
  $('#png').click(function() {
    chart.exportChart({
      type: 'image/png',
      filename: 'my-png'
    });
  });
  $('#jpeg').click(function() {
    chart.exportChart({
      type: 'image/jpeg',
      filename: 'my-jpeg'
    });
  });
  $('#svg').click(function() {
    chart.exportChart({
      type: 'image/svg+xml',
      filename: 'my-svg'
    });
  });

//Highcharts 
var chart = Highcharts.chart('percent', {
  chart: {
    type: 'column',
   
    height: 300
    
  },
title: {
text: ' '
},
  legend: {
    itemHiddenStyle: {
      color: 'white'
    },
    layout: 'horizontal',
    align: 'right',
    verticalAlign: 'top',
    floating: true,
    symbolRadius: 0,
    symbolPadding: 15,
    



  },


  yAxis: [{
    min: 0,
    max: 6,
    title: {
      text: ' '
    },
    labels: {
      format: '{value:,.0f}%'
    },
    gridlineColor: '#D2D2D2'

  }],
  credits: {
    enabled: false
   },

  

  xAxis: {
    type: 'datetime',
    tickInterval: 5 * 365 * 24 * 3600 * 1000, // one y
    labels: {
      format: '{value:%Y}',
      y: 38


    },
    gridlineColor: '#D2D2D2'
  },

  series: [{
    "selected": true,
    "color": "white",
    name: 'United States',
    data: [5.7, 5.5, 5.3, 4.6, 4.7, 4.3, 3.9, 3.6, 3.4, 3.2, 3.0, 2.9, 2.9, 2.9, 3.2, 3.6, 3.8, 3.8, 3.8, 3.8,
      4.2, 4.6, 4.7, 4.6, 4.2, 3.8, 3.5, 3.3
    ],
    pointInterval: 365 * 24 * 3600 * 1000,
    pointStart: Date.UTC(1988, 0, 7)




  }, {
    name: 'Australia',
    data: [2.2, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.0, 1.9, 1.9, 1.9, 1.9, 1.8, 1.9, 1.9, 1.8, 1.8, 1.8, 1.8, 1.8,
      1.8, 1.9, 1.9, 1.8, 1.7, 1.7, 1.8, 1.9
    ],
    pointInterval: 365 * 24 * 3600 * 1000,
    pointStart: Date.UTC(1988, 0, 7),






  }],
  //disable the nav...