/* in src/assets/amp/skins/amp-default/custom-amp-icons.css */
/* Disable the icon‐font altogether */
@font-face {
  font-family: azuremediaplayer;
    src: local("");
}

/* 1) nuke the old font glyph */
.amp-default-skin .vjs-play-control::before {
  content: none !important;
}

/* 2) size the play button and put your SVG on it */
.amp-default-skin .vjs-play-control {
  width: 1em;
  height: 1em;
  display: inline-block;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent !important;
}

/* 3) paused state = play icon */
.amp-default-skin .vjs-play-control {
  background-image: url("/assets/amp/skins/amp-default/icons/play.svg") !important;
}

/* 4) playing state = pause icon (will get overridden by rule #6 below) */
.amp-default-skin.vjs-playing .vjs-play-control {
  background-image: url("/assets/amp/skins/amp-default/icons/pause.svg") !important;
}

/* 5) hide that stray <span> box under the play button */
.amp-default-skin .vjs-play-control .vjs-icon-placeholder {
  display: none !important;
}

/* 6) catch-all playing state in case specificity/order tries to sneak back */
.amp-default-skin.vjs-playing .vjs-play-control {
  background-image: url("/assets/amp/skins/amp-default/icons/pause.svg") !important;
}

/* 1) nuke the old glyph */
.amp-default-skin .vjs-mute-control::before {
  content: none !important;
}

/* 2) size & lay in your SVG background on the control itself */
.amp-default-skin .vjs-mute-control {
  width: 1em;
  height: 1em;
  display: inline-block;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent !important;

  /* DEFAULT (unmuted) */
  background-image: url("/assets/amp/skins/amp-default/icons/volume-high.svg") !important;
}

/* 3) swap to your other icons for each leveled class */
/* muted */
.amp-default-skin .vjs-mute-control.vjs-vol-0 {
  background-image: url("/assets/amp/skins/amp-default/icons/volume-high.svg") !important;
}
/* low volume */
.amp-default-skin .vjs-mute-control.vjs-vol-1 {
  background-image: url("/assets/amp/skins/amp-default/icons/volume-high.svg") !important;
}
/* high volume */
.amp-default-skin .vjs-mute-control.vjs-vol-2 {
  background-image: url("/assets/amp/skins/amp-default/icons/volume-high.svg") !important;
}

.amp-default-skin .vjs-fullscreen-control::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url("/assets/amp/skins/amp-default/icons/fullscreen.svg")
              no-repeat center/contain !important;
}

/* exit fullscreen */
.amp-default-skin.vjs-fullscreen .vjs-fullscreen-control::before {
  background-image: url("/assets/amp/skins/amp-default/icons/fullscreen.svg") !important;
}

/* kill the old dot-holder */
.amp-default-skin .vjs-menu-button .vjs-icon-placeholder {
  display: none !important;
}

/* your existing rule still applies the SVG as a background */
.amp-default-skin .vjs-menu-button {
  width: 1em;
  height: 1em;
  background: url("/assets/amp/skins/amp-default/icons/menu.svg")
              no-repeat center/contain !important;
}

/* if you want a different look when open… */
.amp-default-skin .vjs-menu-button[aria-expanded=true] {
  background-image: url("/assets/amp/skins/amp-default/icons/menu.svg") !important;
}