How to use @material/icon-button - 10 common examples

ngAfterContentInit() {
        this.initRipple();
        this.toggleFoundation = new MDCIconButtonToggleFoundation(this.toggleAdapter);
        this.toggleFoundation.init();
        // the foundation doesn't initialize the iconOn/iconOff and labelOn/labelOff until
        // toggle is called for the first time,
        // also, this will ensure 'aria-pressed' and 'aria-label' attributes are initialized:
        this.toggleFoundation.toggle(this._on);
        this._initialized = true;
    }

const elementGoogleMaps = document.getElementById('google-maps');
const elementGoogleStaticMaps = document.getElementById('google-static-maps');
const elementReviewsContainer = document.getElementById('reviews-container');
const elementReviewsList = document.getElementById('reviews-list');

/**
 * Material Design
 */
// Enhance icon button to have a ripple effect by instantiating MDCRipple 
// on the root element.
const iconButtonRipple = 
  new MDCRipple(document.querySelector('.mdc-icon-button'));
iconButtonRipple.unbounded = true;

const toggleFavoriteButton = 
  new MDCIconButtonToggle(elementAddToFavorites);

elementAddToFavorites.addEventListener('MDCIconButtonToggle:change', function(evt) {
  // let newStatus = evt.detail.isOn ? 'yes' : 'no';
  if (evt.detail.isOn) {
    is_favorite = true;
    postIsFavoriteNetworkFirst(self.restaurant_id, is_favorite)
  } else {
    is_favorite = false;
    postIsFavoriteNetworkFirst(self.restaurant_id, is_favorite);
  }
});

/**
 * Post the is_favorite status by restaurant_id, save data locally to IndexedDB,
 * send to API server, update UI.
 * POST: http://localhost:1337/restaurants//?is_favorite=true

getDefaultFoundation() {
    return new MDCIconButtonToggleFoundation({
      addClass: (className: string) => this.root.addClass(className),
      removeClass: (className: string) => this.root.removeClass(className),
      hasClass: (className: string) => this.root.hasClass(className),
      setAttr: (attrName: string, attrValue: string | number | null) =>
        this.root.setProp(attrName as any, attrValue),
      notifyChange: (evtData: { isOn: boolean }) =>
        this.emit('onChange', evtData)
    });
  }

getDefaultFoundation() {
    const adapter: MDCIconButtonToggleAdapter = {
      addClass: (className: string) => this._getHostElement().classList.add(className),
      removeClass: (className: string) => this._getHostElement().classList.remove(className),
      hasClass: (className: string) => this._getHostElement().classList.contains(className),
      setAttr: (name: string, value: string) => this._getHostElement().setAttribute(name, value),
      notifyChange: (evtData: {isOn: boolean}) => {
        this.change.emit(new MdcIconButtonChange(this, evtData.isOn));
        this._onChange(this._foundation.isOn());
      }
    };
    return new MDCIconButtonToggleFoundation(adapter);
  }

mounted() {
    const { CHANGE_EVENT } = MDCIconButtonToggleFoundation.strings;
    const adapter = {
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      hasClass: className => Boolean(this.classes[className]),
      setAttr: (attrName, attrValue) =>
        this.$el.setAttribute(attrName, attrValue),
      notifyChange: evtData => {
        this.$emit(CHANGE_EVENT, evtData);
        this.$emit('change', evtData.isOn);
      },
    };

    this.foundation = new MDCIconButtonToggleFoundation(adapter);
    this.foundation.init();

    this.ripple = new RippleBase(this, {
      isUnbounded: () => true,
    });
    this.ripple.init();
    this.foundation.toggle(this.isOn);
  },

mounted() {
    const { CHANGE_EVENT } = MDCIconButtonToggleFoundation.strings;
    const adapter = {
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      hasClass: className => Boolean(this.classes[className]),
      setAttr: (attrName, attrValue) =>
        this.$el.setAttribute(attrName, attrValue),
      notifyChange: evtData => {
        this.$emit(CHANGE_EVENT, evtData);
        this.$emit('change', evtData.isOn);
      },
    };

    this.foundation = new MDCIconButtonToggleFoundation(adapter);
    this.foundation.init();

    this.ripple = new RippleBase(this, {
      isUnbounded: () => true,
    });
    this.ripple.init();
    this.foundation.toggle(this.isOn);
  },

mounted() {
    const { CHANGE_EVENT } = MDCIconButtonToggleFoundation.strings;
    const adapter = {
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      hasClass: className => Boolean(this.classes[className]),
      setAttr: (attrName, attrValue) =>
        this.$el.setAttribute(attrName, attrValue),
      notifyChange: evtData => {
        this.$emit(CHANGE_EVENT, evtData);
        this.$emit('change', evtData.isOn);
      },
    };

    this.foundation = new MDCIconButtonToggleFoundation(adapter);
    this.foundation.init();

    this.ripple = new RippleBase(this, {

mounted() {
    const { CHANGE_EVENT } = MDCIconButtonToggleFoundation.strings;
    const adapter = {
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      hasClass: className => Boolean(this.classes[className]),
      setAttr: (attrName, attrValue) =>
        this.$el.setAttribute(attrName, attrValue),
      notifyChange: evtData => {
        this.$emit(CHANGE_EVENT, evtData);
        this.$emit('change', evtData.isOn);
      },
    };

    this.foundation = new MDCIconButtonToggleFoundation(adapter);
    this.foundation.init();

    this.ripple = new RippleBase(this, {

componentDidMount() {
    this.foundation = new MDCIconButtonToggleFoundation(this.adapter);
    this.foundation.init();
  }

                  ref={(surfaceEl) => this.iconToggle = surfaceEl && new MDCIconButtonToggle(surfaceEl)}>
                  <i>favorite</i>