Generated by SassMeister.com.

input.scss

.icon:before {
	font-family: "your-font-name";
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
}
.icon-arrow-down:before { content: "\E001"; }
.icon-arrow-left:before { content: "\E002"; }
.icon-arrow-right:before { content: "\E003"; }
.icon-arrow-top:before { content: "\E004"; }

.foo {
    @extend .icon, :before;
    @extend .icon-arrow-down, :before;
}

.bar:before {
    @extend .icon, :before;
    @extend .icon-arrow-down, :before;
}

.qux:after {
    @extend .icon, :before;
    @extend .icon-arrow-down, :before;
}

output.css

@charset "UTF-8";
.icon:before, .icon.qux:after, .bar:before, .bar.qux:after, .bar.foo, .foo:before, .foo.qux:after, .foo {
  font-family: "your-font-name";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

.icon-arrow-down:before, .qux:after, .bar:before, .foo:before, .foo.bar, .foo {
  content: "";
}

.icon-arrow-left:before, .icon-arrow-left.qux:after, .icon-arrow-left.foo {
  content: "";
}

.icon-arrow-right:before, .icon-arrow-right.qux:after, .icon-arrow-right.foo {
  content: "";
}

.icon-arrow-top:before, .icon-arrow-top.qux:after, .icon-arrow-top.foo {
  content: "";
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}