:root { --icon-settings: '\e900'; --icon-plus: '\e901'; --icon-trash: '\e902'; --icon-edit: '\e903'; --icon-tick: '\e904'; } .icon { display: inline-flex; align-items: center; &:after { font-family: simpleCalorieTracker; } &.icon-settings { &:after { content: var(--icon-settings); } } &.icon-plus { &:after { content: var(--icon-plus); } } &.icon-edit { &:after { content: var(--icon-edit); } } &.icon-trash { &:after { content: var(--icon-trash); } } &.icon-tick { &:after { content: var(--icon-tick); } } }