Ember submit on an Icon

I have a working submit system when editing a company on my website. Currently I am submiting the data with which gives me a clickable text that handles the submit action, now I don't want a text I want the submit action on an Icon from Fontawesome.

This is the code in the .hbs file

  
  <div class="card-header bg-primary">
    <div class="row">
      <div class="col-sm-6">
        <a class="card-link text-white" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Übersicht</a>
      </div>
      <div class="col-sm-6 text-right d-block">
        
        <a class="card-link text-white"><i class="fa save"></i></a>
        <a onclick= class="card-link text-white"><i class="fa abort"></i></a>
        <a  class="card-link text-white"><i class="fa trash"></i></a>
        <a class="card-link text-white" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><i class="fa angle"></i></a>
      </div>
    </div>
  </div>
  <div id="collapseOne" class="collapse multi-collapse show border border-primary rounded-bottom">
    <div class="card-body">
        <div class="row">
          <div class="col-sm-12">
            
            
          </div>
        </div>
        <div class="row">
          <div class="col-sm-2">
            <img class="img-fluid" alt="FIRMENLOGO" src="img/puzzle_logo.png">
          </div>
          <div class="col-sm-10 row">
            <div class="col-sm-4">
              <table class="table-uebersicht">
                <tr>
                  <td></td>
                </tr>

I want to put the action from

onto the

 <a class="card-link text-white"><i class="fa save"></i></a>

element.

And this is the .js file behind it

import { inject as service } from '@ember/service';
import Component from '@ember/component';
import { computed } from '@ember/object';
import CompanyModel from '../models/company';

export default Component.extend({
  store: service(),
  i18n: service(),
  router: service(),

  personPictureUploadPath: computed('company.id', function() {
    return `/company/${this.get('company.id')}/picture`;
  }),

  actions: {
    submit(changeset) {
      return changeset.save()
    .then(() => this.sendAction('submit'))
    .then(() => this.get('notify').success('Firmenübersicht wurde aktualisiert!'))
    .catch(() => {
      let company = this.get('company');
      let errors = person.get('company').slice(); // clone array as rollbackAttributes mutates

      person.rollbackAttributes();
      errors.forEach(({ attribute, message }) => {
        let translated_attribute = this.get('i18n').t(`company.${attribute}`)['string']
        changeset.pushErrors(attribute, message);
      this.get('notify').alert(`${translated_attribute} ${message}`, { closeAfter: 10000 });
    });
    });
    },
    deleteCompany(companyToDelete) {
      companyToDelete.destroyRecord();
      this.get('router').transitionTo('companies');
      window.location.reload(true);
    }
  }

});

Thanks for your answers!